上一节讲了vue-router的基本配置和使用,这节来说动态路由
一、什么是动态路由
动态路由就是url后面的一些值是可以动态变化的
二、这里来配一个动态路由
如下:userId可以动态变化
const routes = [ //创建路由组件 { path: '', redirect: '/home' //rediret重定向 }, { path: '/user/:userId', //这里配置动态路由 component: User } ]
我们在App.vue中设置一些东西 通过用v-bind绑定data,我们就可以访问动态路由了
<router-link v-bind:to="'/user/'+userId">用户</router-link> export default { name: 'App', data(){ return { userId:'lixiaopei', imgUrl:'http://sdsadasdsadas' } } }
同时我们通过使用计算属性(你也可以用函数)就能动态获取:userId了
userId(){ return this.$route.params.userId//route并非router route是取当活跃的那个路由 }
三、URL的hash模式和history模式
history模式实际上是以栈来存储
/ <!-- 修改hash会使链接改变但是不会从服务器请求数据 --> // <!-- 1.监听url的改变方式其一 修改hash --> location.hash = 'aaa' //这样会在链接后端添加一个aaa的路由 //方式其二 history.pushState({}, '', 'home'); //这个history实际上是一个栈 //使用back方法出栈 history.back() //替换操作 replace是替换操作 history.replaceState({}, '', 'sss') //history的go方法 直接跳转到栈的阶数,负一就是当前栈顶的后面一楼 history.go(-1) //history.foward就是go(1) history.forward()
我们在创建router的时候可以手动修改这两个模式而默认下vue使用的是hash模式
const router = new VueRouter({ routes, mode: 'history', //默认配置为哈希模式用mode可以指定路由模式 LinkActiveClass: 'active' //处理活跃时候的类名可以在这里改 还可以通过在div中用active-class单个修改 }) export default router