“vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)”
这段是从网上直接抄的,我们在创建vue项目是有个选项,是否安装vuer-router选择y或者回车,如果不是这么创建的,在命令行安装吧,建议创建时直接安装,省了很多麻烦。
参照网上的栗子没有一个成功的,不知是版本不正确还是什么原因,我的版本是2.9.6,如果你是其他版本,参照我的dome时可能会出错。
先看一下网上的栗子:


这是来自“菜鸟教程”的,一开始我看到后是懵的,js脚本写在那个文件?第一张图的代码写在哪里?后来不甘心,打开xx视频教程,看了一遍又一遍,怎么搞都不对。索性不按照教程的来,自己研究一下吧。
首先假设你已经安装了路由插件。
第一步,在components文件下创建title.vue和title1.vue
title.vue内容:

<template>
<div>如果不是为了衣锦返乡,谁愿意远走他乡。</div>
</template>
<script>

title2.vue内容:

<template>
<div>
<br>
将来的你会感谢现在拼命的你
</div>
</template>

第二步,打开src/router/index.js

import Router from 'vue-router'//默认就有的,引入路由
import HelloWorld from '@/components/HelloWorld'//默认就有的
import title1 from '@/components/title';//引入刚写的组件
import title2 from '@/components/title2';//引入刚写的组件
Vue.use(Router)
export default new Router({
// routes: [{},{}]格式就是这样,默认就有的
routes: [
{
path: '/title1',//与引入的名称一致,就是在浏览器输入的url,后端的应该很了解
component: title1//同上
},
{
path: '/title2',
component: title2
}
]
})

第三步,保存上面的内容,打开app.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/title1">title</router-link>
<router-link to="/title2">title2</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

其中:

<router-link to="/title1">title</router-link>
<router-link to="/title2">title2</router-link>
这两行是我们要写的,其他可以删除,也可不变。
* router-link 中的to表示目标路由的链接。 所以这个值可以是一个字符串或者是描述目标位置的对象。

最后,npm run dev 然后查看结果,如有不正确欢迎留言,一起探讨。
结语:可能很多同行有疑问,我写的都是基础的。
没办法,介绍一下我自己,08年从事net后端开发至今,经历过db、后端、前端一起写,由于是前端文盲,在充当救火员的角色时是相当的累。

今年决定用vue,发现前端力量不够,被迫每晚学习一下。各位有好的前端教程、资料都可以发我,我qq:546170667,欢迎骚扰。

vue路由(一)的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  3. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  4. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  5. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  6. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  7. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  8. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  9. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  10. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. Oracle存在则更新,不存在则插入应用-merge

    转: Oracle存在则更新,不存在则插入应用-merge 2017年01月11日 14:15:26 周星猩 阅读数 11354更多 分类专栏: Oracle   版权声明:本文为博主原创文章,遵循C ...

  2. Javascript——概述 && 继承 && 复用 && 私有成员 && 构造函数

    原文链接:A re-introduction to JavaScript (JS tutorial) Why a re-introduction? Because JavaScript is noto ...

  3. 123457123457#0#-----com.yimeng.wangZheChengYu01--前拼后广--成语头脑王者

    com.yimeng.wangZheChengYu01--前拼后广--成语头脑王者

  4. 《Hadoop》大数据技术开发实战学习笔记(二)

    搭建Hadoop 2.x分布式集群 1.Hadoop集群角色分配 2.上传Hadoop并解压 在centos01中,将安装文件上传到/opt/softwares/目录,然后解压安装文件到/opt/mo ...

  5. 最新 翔通动漫java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.翔通动漫等10家互联网公司的校招Offer,因为某些自身原因最终选择了翔通动漫.6.7月主要是做系统复习.项目复盘.Leet ...

  6. 当后端返回的数据是以属性做开头,怎么用length取值

    在我们前端开发中,一般需要的数据是分条的如 [{},{},{},{}] ,这样的数据方便我们用length取值,尤其是在表格中.在控制台看的时候能轻易的看出1 2 3 4条,但有时候后台返回的数据不是 ...

  7. [ReferenceError: __insane_exports is not defined] [monaco-editor@0.18.0] [vue] [typescript]

    npm install monaco-editor@ 安装上面的命令,安装0.17.0版本.

  8. 超全的IE兼容性问题及解决方案

    1.怪异盒模型:在老版本IE下不设置文档声明,页面就会进入怪异盒模型解析,所以要设置文档声明: 2.IE6下,子元素的宽高超出父级的宽高 :可以把父级设 置好的宽度撑开 3.在IE6下,块属性元素的高 ...

  9. Spring 设计模式之责任链模式

    [应用] 以下是一段代码,Spring MVC 的 diapatcherServlet 的 doDispatch 方法中,获取与请求匹配的处理器(HandlerExecutionChain) getH ...

  10. Pytest执行用例报Hint: make sure your test modules/packages have valid Python names.

    近日,使用Pytest+Appium 实现APP端UI自动化,遇到Pytest收集用例失败的情况. 报错信息如下: test_room.py:None (test_room.py) ImportErr ...