Vue中的路由vue-router

491 阅读1分钟

安装

npm install vue-router

使用

用来配置路由  to:跳转的路径  router-link最终会被渲染成a标签 to 里面的值渲染成href的值 
router-link和router-view都是一个全局的组件
<body>
  <router-link to="/home" tag="div" class="a">首页</router-link>
  <router-link to="/login"  tag="button" class="b">登录</router-link>
  <!--命名路由:将to改为动态属性,:to={name:路由名字}-->
  <router-link to="{name:'first'}" >命名路由</router-link>
  <!--router-view : 视图 路由匹配的组件显示在这里 一个router-view渲染一个组件-->
  <router-view></router-view>
  <!--xiaomi中写了嵌套路由-->
  <template id="xiaomi">
    <div>
      小米登录
      <router-link to="/login/detFir">详情一</router-link>
      <router-link to="/login/detSec">详情二</router-link>
      <router-view></router-view>
    </div>
  </template>
<body>
<script>
// 路由: 一个路径对应一个组件
// router-link 将编译成a标签显示;
// 1. 创建组件
// 2. 配置路由映射表: 路由映射表是一个对象;里面有path:路径 compoent 对应的是组件
// 3. 注册路由映射表
// 4. 把router挂载到vm实例上
let  shouye = {
  data(){
    return {
      con:"京东首页"
    }
  },
  template:"<div>{{con}}</div>"
}
let  denglu = {
  data(){
    return {
      con:"小米登录"
    }
  },
  template:"#xiaomi"
}
let detFir={
  template:"<div>详情一内容</div>"
}
let detSec={
  template:"<div>详情二内容</div>"
}
// 2.配置路由映射表;
// path : 当前组件的路径  component: 组件名
// router-link的to属性的属性值和该对象中path要对应上
let routes = [{
    path:"/home",
    component:shouye,
    redirect:home,
    name:"first"
  },{
    path:"/login",
    component:denglu,
    //配置路由用children
    children:[{
      path:"detFir",
      component:detFir
    },{
      path:"detSec",
      component:detSec
    }]
}];
// 3. 注册路由映射表
let router = new VueRouter({
  routes,
  //修改对应路径的link类名,默认router-link-active
  linkActiveClass:'current',
  //不仅路径一样,参数也一样的时候,才会有此类名
  linkExactActiveClass:'exactCurrent'
})
//4. 将router挂载到DOM实例上
let vm = new Vue({
  el:"#app",
  components:{},
  router
});    
</script>

编程式导航

  • this.$router.push(参数[路径字符串]):直接从当前路由跳转url 到对应的组件上
  • this.$router.back():回退上一次路由
  • this.$router.go(number):让路由前进或者后退;
    • this.$router.go(1):在浏览器记录中前进一步,等同于history.forward()
    • this.$router.go(-1):后退一步记录,等同于history.back()

动态路由

  • 可以路由传参:路径后面跟一个 :变量;这就是动态路由,也叫动态传参;会把路由id匹配后面的路径放在$route的params属性上,属性值就是id的值
  • 优点:代码少,动态路由渲染的是同一个组件,当路由改变以后,home组件不会销毁,当前也不需要再次创建,复用之前的组件,性能高;生命周期的钩子函数也不会执行
<div id="app">
  <router-link to="/home/1">第一本</router-link>
  <router-link to="/home/2">第二本</router-link>
  <router-view></router-view>
</div>
<script>
let home={
  created(){
    console.log(this);
  },
  destroyed(){
    console.log("已销毁");
  },
  watch:{
    //监听组件实例的$route属性
    '$route'(to,from){
      //监听路由被复用:可以通过watch监听$route属性
      //to:最新的路由信息
      //from:代表上一次的路由信息
      console.log(to,from);
    }
  },
  template:"<div>这是我喜欢的第{{$route.params.id}}本书</div>"
}
let routes=[{
  path:"/home/:id",
  component:home
}];
let router = new VueRouter({
  routes
})
let vm = new Vue({
  el:"#app",
  router
});
</script>

命名路由

<div id="app">
    <!-- 将to改成动态属性  :to={name:路由的名字}-->
    <router-link :to="{name:'first'}">首页</router-link>
    <router-view></router-view>
</div>
<script>
    // url : 根据path和to中的路径进行匹配
    // 名字匹配
    // 命名路由: 给路由起个名字
    let  home = {
        template:"<div>首页</div>"
    }
    // name :属性给该路由起一个名字
    let routes=[{path:"/home",component:home,name:"first"}];
    let router = new VueRouter({
        routes
    })
    let vm = new Vue({
        el:"#app",
        router
    });
</script>

路由传参

  • :id 传参:<router-link to="/home/chuancan>;在routes 中 path :"/home/:id" ; 通过this.$route.xx 拿到参数
  • query 传参:在要执行的方法中通过push传一个对象, this.router.push(path:"/list",query:id:1);通过this.router.push({path:"/list",query:{id:1}});通过this.route.query 可拿到参数
  • params 传参:必须通过命名路由的方式才能使用params传参
  <div id="app">
  <router-link to="/home">首页</router-link>
  <router-link to="/list">列表</router-link>
  <router-view></router-view>
</div>
<template id="list">
  <div>
    这是首页<button @click="fn">跳转列表</button>
    query:{{$route.query.name}}
    params:{{$route.params.id}}
  </div>
</template>
<script>
let home={
  methods: {
    fn() {
      this.$router.push({ path: '/list', query: { name: '小妖' } })
      console.log(this.$route.query)
      this.$router.push({name:"first",params:{id:1}})
       console.log(this.$route.query)
    }
  },
  template:"#list"
}
let list={
  template:"<div>列表内容</div>"
}
let routes=[{
  path:"/home",
  component:home
},{
  path:"/list",
  name:"first",
  component:list
}];
let router = new VueRouter({
  routes
})
let vm = new Vue({
  el:"#app",
  router
});
</script>

命名视图

<div id="app">
  <router-link to="/home">首页</router-link>
  <router-view></router-view>
  <router-view name="foo"></router-view>
</div>
<script>
let home = {
  template:"<div>首页内容</div>"
}
let list = {
  template:"<div>第二部分</div>"
}
let routes = [{
  path:"/home",
  components:{
    default:home,
    foo:list
  }
}]
let router = new VueRouter({
  routes
})
let vm = new Vue({
  el:"#app",
  router
})
</script>

导航(路由)守卫

全局守卫3个:

  • 全局前置守卫:router.beforeEach((to,from,next)=>{next()})
  • 全局解析守卫:router.beforeResolve((to,from,next)=>{next();})
  • 全局后置守卫: router.afterEach((to,from)=>{console.log("切换成功")});

路由独享守卫1个

在 routes 中, beforeEnter:(to,from,next)=>{next()},发生在beforeResolve之前

组件内部守卫3个

在组件内部

  • beforeRouteEnter(to,from,next){next(vm)=>{ console.log(vm) }}
  • beforeRouteUpdata(to,from,next){next()};
  • beforeRouteLeave(to,from,next){next()} 当离开该组件时,会触发该守卫;然后再触发全局的进入守卫beforeEach

参数变化,查询改变不会引发导航守卫,因为组件一直没变,只能watch监听$route 或 beforeRouteUpdate组件守卫 当切换导航时,到了特定的时间会默认调用一些钩子函数,那么这些函数就是导航守卫,可以在进入个导航或者离开导航时,可以在钩子函数中做一些事情