微客导航 » 文章资讯 » vue-router 路由基础的详解

vue-router 路由基础的详解

2023-09-23 02:14:05 347

vue-router路由基础的详解

今天我总结了一下vue-route基础，vue官方推荐的路由。

一、起步

HTML


简单路由
Gotofoo
Gotobar

//渲染出口

创建模板（组件）：

(也可以用import引入外部组件)

varfoo={template:"我是foo组件"};
varbar={template:"我是bar组件"};

组件注入路由：

varroutes=[
{path:'/foo',component:foo},
{path:'/bar',component:bar},
];

创建路由实例：

//这里还可以传入其他配置
constrouter=newVueRouter({
routes//（缩写）相当于routes:routes;
});

注意这里routes没有‘r'(不要写成routers)

创建vue实例（并挂载实例）

varrouterVue=newVue({
router
}).$mount("#myDiv");

二、动态路由匹配

有时候我们需要的是模板结构一样，当时数据不一样，就相当于我们要把不同ID的登录用户连接到同一个页面，但要显示每个用户的独立信息，这时我们就用到了动态路由匹配。

动态路由主要用到了全局$route.params和路由的动态参数，全局route的paramsAPI存储着路由的所有参数，路径的参数用“：”来标记：

HTML


//点击对应链接时传入对应参数foo和bar
Gotofoo
Gotobar

constUser={
template:'我的ID是{{$route.params.id}}',
//在路由切换时可以观察路由
watch:{
'$route'(to,form){
console.log(to);//要到达的
console.log(form);
}
}
}

constrouter=newVueRouter({
routes:[
{path:'/user/:id',component:User}//标记动态参数id
]
});

varmyVue=newVue({
router
}).$mount("#myDiv")

三、嵌套路由

1.嵌套路由讲的是我们可以在中去在渲染这时要在配置路由时使用children

例如：

HTML：


Gotofoo
Gotobar

JS：

constUser={
template:'我的ID是{{$route.params.id}}
ChildOneChildOne',
}

//子路由
constuserChildOne={
template:'我是userChildOne'
}
constuserChildTwo={
template:'我是userChildTwo'
}
constrouter=newVueRouter({
routes:[
{path:'/user/:id',component:User,
children:[//用法和参数和routes一样
{path:"/user/childone",component:userChildOne},
{path:"/user/childtwo",component:userChildTwo}
]

}
]
});

varmyVue=newVue({
router
}).$mount("#myDiv")

四、命名路由

1.给路由命名指定路路由跳转，要用到参数name和v-bind

HTML:



Gotofoo
Gotobar

JS:

constUser={
template:'我的ID是{{$route.params.userId}}',
watch:{
'$route'(to,form){
console.log(to);
console.log(form);
}
}
}

constrouter=newVueRouter({
routes:[
//name一一对应上
{path:'/user/:userId',name:"userOne",component:User},
{path:'/user/:userId',name:"userTwo",component:User}
]
});

varmyVue=newVue({
router
}).$mount("#myDiv")

五、命名视图

1.给渲染视图router-view命名，来制定让那个视图渲染组件

HTML:



Gotofoo
Gotobar

JS：

//四个模板
constUserA={
template:'我是one,ID是{{$route.params.userId}}',
}
constUserB={
template:'我是two,ID是{{$route.params.userId}}',
}
constUserC={
template:'我是three,ID是{{<1ro>ute.params.userId}}',
}
constUserD={
template:'我是four,ID是{{$route.params.userId}}',
}
constrouter=newVueRouter({
routes:[
//name一一对应上
{
path:'/user/:userId',
name:"userOne",
components:{//注意这里为components多个“s”
default:UserA,
b:UserB
}
},
{
path:'/user/:userId',
name:"userTwo",
components:{
default:UserD,
b:UserC
}
}
]
});

varmyVue=newVue({
router
}).$mount("#myDiv")

六、重定向和别名

重定向和别名，首先我先来解释一下什么叫做重定向和别名

『重定向』的意思是，当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b，

『别名』/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。
重定向主要用参数：redirect而别名主要用到参数：alias

HTML:


效果查看地址栏最后面的变化
Gotofoo
Gotobar
Gotobar

JS:

constUser={
template:'我是同一个页面',
}
constrouter=newVueRouter({
mode:"history",
routes:[
{path:'/User/foo',component:User},
{path:'/User/bar',redirect:'/User/foo',component:User},
//重定向的目标也可以是一个命名的路由：
//甚至是一个方法，动态返回重定向目标：

//别名设置
{path:'/User/foo',alias:'/User/Car'}

]
});

varmyVue=newVue({
router
}).$mount("#myDiv")

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

vue-router 路由基础的详解

简单路由

效果查看地址栏最后面的变化

热门推荐

随机推荐