v-router动态路由
(1)初期
(1)在模块化工程中使用,必须要通过Vue.use()
明确安装路由功能。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue. use ( VueRouter)
(2)动态路由匹配
(1.)动态路径参数:一个路径参数使用:
标记。当匹配到一个路由时,参数值会被设置到$this.route.params,可以在每个组件内使用。 (2.)如何使用:
< template>
< div class = "User" >
this is id : { { $route. params. id} } < br>
she name : { { $route. params. admin} }
< / div>
< / template>
< script>
export default {
name: "User"
}
< / script>
import Vue from "vue" ;
import VueRouter from "vue-router" ;
import User from "../views/User.vue" ;
Vue. use ( VueRouter) ;
const routes = [
{
path: "/User/:id/goods/:admin" ,
path: "/User/:id" ,
name: "User" ,
component: User
}
] ;
const router = new VueRouter ( {
mode: 'history' ,
routes
} ) ;
export default router;
传一个动态参数id:在浏览器地址栏内输入如:"http://localhost:3000/User/45" 显示: 传两个动态参数id ,admin:在浏览器地址栏内输入如:"http://localhost:3000/User/45/goods/kiki" 显示: (3.)应用:组件利用$route.params.XXX,来获取到你需要的数据。例如:用户登录时获取用户名,更新输出用户ID。或者点击不同商品更新展示页面。 贴上大佬链接帮助理解: (1) Vue 动态路由详解及实例 (2)vue-router入门(1)—— 基本路由,动态匹配路由,嵌套路由
(3)响应路由参数的变化
使用路由参数时,如/user/foo
导航到/user/bar
,原来的组件会被复用,两个路由渲染的是同一个组件,复用更高效,同时组件生命周期钩子不会再被调用。 (1.)监测路由参数变化:如果想对路由参数变化作出响应的话。可以watch(监测变化)$route对象: 例:
< template>
< div class = "User" >
此时id是: { { id} } < br>
< router- link : to= '"/User/haha"' > 跳转haha< / router- link>
< / div>
< / template>
< script>
export default {
name: "User" ,
data ( ) {
return {
id: ''
}
} ,
mounted ( ) {
console. log ( "我执行了" )
this . id = this . $route. params. id
} ,
watch: {
$route ( to, from ) {
console. log ( "change!!!" )
this . id = this . $route. params. id;
}
}
}
< / script>
(2)或者使用beforeRouteUpdate 导航守卫。 (3)通配符:捕获所有路由或404 Not Found
路由。常规参数只会匹配被/
分割url片段中的字符。匹配任何路由使用*
例:
{
path: '*'
}
{
path: '/user-*'
}