本文主要介绍了vue-router 路由基础的详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下，希望能帮助到大家。
vue-router 路由基础的详解
今天我总结了一下vue-route基础，vue官方推荐的路由。
一、起步
HTML
立即学习“前端免费学习笔记（深入）”；
简单路由
Go to foo Go to bar // 渲染出口
创建模板（组件）：
(也可以用import 引入外部组件)
var foo={template:"我是foo 组件
"};
var bar={template:"我是bar 组件
"};组件注入路由：
var routes = [
{path:'/foo',component:foo},
{path:'/bar',component:b ar},
];创建路由实例：
// 这里还可以传入其他配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes;
});注意这里 routes 没有 ‘ r ' (不要写成 routers)
创建vue实例（并挂载实例）
var routerVue = new Vue({
router
}).$mount("#myp");二、动态路由匹配
有时候我们需要的是模板结构一样，当时数据不一样，就相当于我们要把不同ID的登录用户连接到同一个页面，但要显示每个用户的独立信息，这时我们就用到了动态路由匹配。
动态路由主要用到了全局 $route.params 和路由的动态参数，全局route 的 params API 存储着 路由的所有参数，路径的参数用 “ ： ”来标记：
HTML
立即学习“前端免费学习笔记（深入）”；
// 点击对应链接时传入对应参数foo 和 bar
Go to foo Go to bar
JS
const User = {
template:'我的ID是{{ $route.params.id }}
',
// 在路由切换时可以观察路由
watch:{
'$route'(to,form){
console.log(to); //要到达的
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User} // 标记动态参数 id
]
});
var myVue = new Vue({
router
}).$mount("#myp")三、嵌套路由
1.嵌套路由讲的是我们可以在
例如：
HTML：
Go to foo Go to bar
JS：
const User = {
template:'我的ID是{{ $route.params.id }}
ChildOne ChildOne 我是 userChildOne
'
}
const userChildTwo = {
template:'我是 userChildTwo
'
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User,
children:[ // 用法和参数和routes 一样
{path:"/user/childone",component:userChildOne},
{path:"/user/childtwo",component:userChildTwo}
]
}
]
});
var myVue = new Vue({
router
}).$mount("#myp")
四、命名路由
1.给路由命名指定路路由跳转，要用到参数name 和 v-bind
HTML:
Go to foo Go to bar
JS:
const User = {
template:'我的ID是{{ $route.params.userId }}
',
watch:{
'$route'(to,form){
console.log(to);
console.log(form);
}
}
}
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("#myp")五、命名视图
1.给渲染视图 router-view 命名，来制定让那个视图渲染组件
HTML:
Go to foo Go to bar
JS：
// 四个模板
const UserA = {
template:'我是one,ID是{{ $route.params.userId }}
',
}
const UserB = {
template:'我是two,ID是{{ $route.params.userId }}
',
}
const UserC = {
template:'我是three,ID是{{ <1ro>ute.params.userId }}
',
}
const UserD = {
template:'我是four,ID是{{ $route.params.userId }}
',
}
const router = new VueRouter({
routes:[
// name 一一对应上
{
path:'/user/:userId',
name:"userOne",
components:{ // 注意这里为components 多个“ s ”
default:UserA,
b:UserB
}
},
{
path:'/user/:userId',
name:"userTwo",
components:{
default:UserD,
b:UserC
}
}
]
});
var myVue = new Vue({
router
}).$mount("#myp")六、重定向 和 别名
重定向 和别名，首先我先来解释一下什么叫做重定向和别名
『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，
『别名』 /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
重定向主要用参数：redirect 而别名主要用到参数： alias
HTML:
效果查看地址栏最后面的变化
Go to foo Go to bar Go to bar
JS:
const User = {
template:'我是同一个页面
',
}
const router = new VueRouter({
mode:"history",
routes:[
{ path:'/User/foo',component:User},
{ path:'/User/bar',redirect: '/User/foo',component:User},
// 重定向的目标也可以是一个命名的路由：
// 甚至是一个方法，动态返回重定向目标：
// 别名设置
{ path:'/User/foo',alias: '/User/Car'}
]
});
var myVue = new Vue({
router
}).$mount("#myp")相关推荐：
