50 Vue 的 动态路由
原创
©著作权归作者所有:来自51CTO博客作者咸咸瑜瑜的原创作品,请联系作者获取转载授权,否则将追究法律责任
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:
https://xxx/YYY/XXX/Username , 即:后面还跟上了用户名 或 ID
这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)。、
对于这种写法 我们可以在定义路由映射 时的 path 属性这样写:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home' //导入组件
import About from '../components/About' //导入组件
import User from '../components/User' //导入User的组件
//注册路由插件
Vue.use(VueRouter)
//这里配置组件的映射和路径 【一个组件对应一个对象】
const routes = [
{path:'/',component:Home},
{path:'/home',component:Home},
{path:'/about',component:About},
{path:'/user/:userName',component:User} //注意这里的path 斜杠冒号 后面跟了一个变量
]
const router = new VueRouter({
routes,
mode:"history",
linkActiveClass:"BiHu"
})
export default router
路由配置文件
User的组件代码:
<template>
<div>
<h1><hr>个人<hr></h1>
<h2><hr>欢迎您:<hr></h2>
</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
</style>
User.Vue 路由组件代码
运行起来也就是这样的: 可以看到什么都没
我们尝试在 url 后面加点什么:
我随便加了个 /123 组件写的模板代码就出来了,但是,这里手动的,那就不是动态的了!!!!
动态路由实现:
这个username 这个数据 肯定是 后端穿过来的 如果存在data中 ,那么就好办了:
路由path这样写: 完美结合
<template>
<div id="app">
<router-link to="home" tag="button" replace >Home</router-link>
<router-link to="about" tag="button" replace >About</router-link>
<router-link :to="'/user/' + username" tag="button" replace >User</router-link> <!-- 非常注意这个路径是 /开头 不然会出现路径嵌套 小细节... 主要是to 和 值绑定-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"App",
data(){ //模拟数据从后端过来
return{username:"BiHu"}
}
}
</script>
<style>
</style>
App.vue App组件
然后User组件这样写:
<template>
<div>
<h1>个人</h1>
<h2><hr>欢迎您:{{$route.params.userName}}<hr></h2> <!--这里直接 取到动态路由最后那个变量username的值!-->
</div>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
</style>
User.vue 主要还是取值那个点
运行:
可以发现 这个BiHu 就是那个 动态路由Path最后那个变量中 取的,然后那个变量又是从 后端接口来的数据(这里是模拟) 取的!。 逻辑一定要清晰!
2021年12月11日 13:28:42:
注意定义路由的时候 带 / 和不带 / 路径的区别,带/是根路径改,不带/ 则是累加。
路由嵌套也有说明.
作者:咸瑜