vue学习笔记 动态路由 hash和history

上一节讲了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