Vue_路由

安装：npm i vue-router -S
this.$route：当前组件对应的路由
this.$router：全局路由对象

动态路由

js const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] })

嵌套路由

js const router = new VueRouter({ routes: [ { path:'/zhinan', component:Zhinan, children:[//二级路由 { path:'anzhuang', component:, { path:'base', component:, } ] }, { path:'/**' component:NotFound } ] })

路由跳转

1. 编程式跳转 this.$router.push({ name: 'User', params: { uname: 123,id:xx } })

2. router-link

   html <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> <router-link to="/zhinan">User</router-link>

路由传参

1. 语法：

   js const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, ] })

2. 组件内获取参数： props:['id']

路由守卫

跳转相同路径错误

js //vue 路由相同路径跳转报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }