vue-router 路由基础的详解
今天我总结了一下vue-route基础，vue官方推荐的路由。
一、起步
HTML
简单路由
// 渲染出口
今天我总结了一下vue-route基础，vue官方推荐的路由。
HTML
// 渲染出口
创建模板（组件）：
(也可以用import 引入外部组件)
我是bar 组件
"};组件注入路由：
创建路由实例：
注意这里 routes 没有 ‘ r ' (不要写成 routers)
创建vue实例（并挂载实例）
有时候我们需要的是模板结构一样，当时数据不一样，就相当于我们要把不同ID的登录用户连接到同一个页面，但要显示每个用户的独立信息，这时我们就用到了动态路由匹配。
动态路由主要用到了全局 $route.params 和路由的动态参数，全局route 的 params API 存储着 路由的所有参数，路径的参数用 “ ： ”来标记：
HTML
JS
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User} // 标记动态参数 id
]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
1.嵌套路由讲的是我们可以在
例如：
HTML：
JS：
我的ID是{{ $route.params.id }}
// 子路由
const userChildOne = {
template:'
}]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
1.给路由命名指定路路由跳转，要用到参数name 和 v-bind
HTML:
JS:
const router = new VueRouter({
routes:[
// name 一一对应上
{path:'/user/:userId',name:"userOne",component:User},{path:'/user/:userId',name:"userTwo",component:User}
]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
1.给渲染视图 router-view 命名，来制定让那个视图渲染组件
HTML:
JS：
我是two,} const UserC = { template:'
我是three,ID是{{ <1ro>ute.params.userId }}
',} const UserD = { template:'我是four,} const router = new VueRouter({ routes:[ // name 一一对应上 { path:'/user/:userId',components:{ // 注意这里为components 多个“ s ” default:UserA,b:UserB } },{ path:'/user/:userId',components:{ default:UserD,b:UserC } } ] });
var myVue = new Vue({
router
}).$mount("#myDiv")
『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，
『别名』 /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。 重定向主要用参数：redirect 而别名主要用到参数： alias
HTML:
JS:
// 别名设置
{ path:'/User/foo',alias: '/User/Car'}]
});
var myVue = new Vue({
router
}).$mount("#myDiv")
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：https://www.f2er.com/vue/35769.html