vue路由的使用时因为vue可以做成单页面应用。在不同页面之间进行切换时，需要用到路由的概念，一个地址对应一个页面
路由的使用
第一步安装 我使用的是vue-cli脚手架工具
vue add router
第二步配置路由
安装完毕以后会有一个路由文件中的index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// import One from '../components/One.vue'
// import Two from '../components/Two.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: 'home'
},
{
path: '/home/:id',占位传参，router-link的形式是
name: 'Home',
component: Home
},
{
path: '/about',//占位符的参数必须传
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
children: [
{
path: '/',
redirect: 'one'
},
{
path: 'one',
name: "One",
component: () => import(/* webpackChunkName: "about" */ '../components/One.vue'),
},
{
path: 'two',
name: "Two",
component: () => import(/* webpackChunkName: "about" */ '../components/Two.vue'),//按需加载
},
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
里面配置路由信息，也就是那个地址对应那个页面
注意
1、路由配置中的path指的是地址，如果是里面有子页面，子页面的地址前面不要在加'/'了。
2、name属性一般是在路由跳转使用
this.$router.push({name:'One',params:{name:this.name,age:18}})push方法时和那个name保持一致，用来找页面用的，如果没有name，会找不到响应的页面。
使用name的时候传参使用的是params.如果跳转使用的是path，传参使用的是query,必须这样对应，否则传参会失败。
query传参的例子
this.$router.push({path:'/home',query:{name:this.name,age:18}})
查询参和占位参
query传递的参数是查询参，可传可不传，不影响地址，页面都会显示出来，顶多是查询的内容为空。
占位参，必须传，否则找不到对应的地址。上面代码中有说明。
路由中有一个导航守卫的用法，一般用来处理权限处理，管理页面跳转比较合适。
守卫分为全局的和单个组件。
下面是一个单个组件路由的处理例子。用来处理路由跳转。注意的是导航守卫后都要执行next()函数。