vue-router
1,动态路由匹配
const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] })
2,一个“路径参数”使用冒号
:
标记。当匹配到一个路由时,参数值会被设置到this.$route.params
,可以在每个组件内使用。
2,捕获所有路由或 404 Not found 路由
当使用通配符路由时,请确保路由的顺序是正确的,也就是说含有通配符的路由应该放在最后。路由 { path: '*' }
通常用于客户端 404 错误,也就是访问的路径错了明明是#/mine 确写成了#/mine111
3,嵌套路由也就是二级路由使用children
配置,children里面的路径不能写/
4,编程式的导航
// 字符串
this.$router.push("/dedail/" + id);
如果用path 和query 跳转页面带参数 路由的配置 “/detail” 接收的话 this.$route.query.id
如果使用其他的跳转页面带参数,路由的配置"/detail/:id" 接受的话 this.$toute.params.id
重定向和别名
重定向
重定向也是通过 router
配置来完成,下面例子是从 /a
重定向到 /b
:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
先捕获到所有路由在重定向到404路由上
别名
“重定向”的意思是,当用户访问 /a
时,URL 将会被替换成 /b
,然后匹配路由为 /b
,那么“别名”又是什么呢?
/a
的别名是 /b
,意味着,当用户访问 /b
时,URL 会保持为 /b
,但是路由匹配则为 /a
,就像用户访问 /a
一样。
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})