微客导航 » 文章资讯 » vue router 配置路由的方法

vue router 配置路由的方法

2023-09-09 19:56:04 244

用Vue.js+vue-router创建单页应用，是非常简单的。使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把vue-router添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉vue-router在哪里渲染它们。

路由的基本实现








Document






home
about

重定向

解释：将/重定向到/home

{path:'/',redirect:'/home'}

路由导航高亮

说明：当前匹配的导航链接，会自动添加router-link-exact-activerouter-link-active类

路由参数

说明：我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，此时，可以通过路由参数来处理
语法：/user/:id
使用：当匹配到一个路由时，参数值会被设置到this.$route.params
其他：可以通过$route.query获取到URL中的查询参数等

//链接：
用户Jack
用户Rose

//路由：
{path:'/user/:id',component:User}

//User组件：
constUser={
template:`User{{$route.params.id}}`
}

嵌套路由-子路由

Vue路由是可以嵌套的，即：路由中又包含子路由
规则：父组件中包含router-view，在路由规则中使用children配置

//父组件：
constUser=Vue.component('user',{
template:`

UserCenter
个人资料
岗位

` }) //子组件： constUserProfile={ template:'

个人资料：张三

' } constUserPosts={ template:'

岗位：FE

' } {path:'/user',component:User, //子路由配置： children:[ { //当/user/profile匹配成功， //UserProfile会被渲染在User的中 path:'profile', component:UserProfile }, { //当/user/posts匹配成功 //UserPosts会被渲染在User的中 path:'posts', component:UserPosts } ] }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue router 配置路由的方法

UserCenter

个人资料：张三

岗位：FE

热门推荐

随机推荐