进阶vue-router

关于vue-router的使用细节，补充(路由默认路径、路由模式、< router-link > 属性补充、使用代码跳转路由、动态路由、路由懒加载、嵌套路由、路由传参、全局导航守卫)

---

前言

路由默认路径、路由模式、< router-link > 属性补充、使用代码跳转路由、动态路由、路由懒加载、嵌套路由、路由传参、全局导航守卫

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、细节补充：

1、路由的默认路径

让路径默认跳到首页，并且< router-view >渲染首页组件

const router =[
    {
        path:'/',          //根路径
        redirect:'/home'   //重定向
    }
]

2、路由模式(hash\history)

路由默认模式是hash模式，可改html5的history模式

const router = new VueRouter({
    routers, //路由规则，另外配，然后引入
    mode:'history'
})

3、属性补充

01、将渲染成其他类型标签(默认a标签)

 <!-->设置tag属性<-->
 <router-link tag="button"></router-link>

02、设置不允许返回前进(默认可以前进后退)

 <!-->replace属性，不用赋值直接写<-->
 <router-link tag="button" replace></router-link>

03、路由被激活的时候(点击谁)，会多两条class,利用此可以实现激活时的样式

 利用这两class名，可以实现很多好东西
    当然还可简化，利用active-class="激活类名"属性
    或者在VueRouter对象中添加属性linkActive:"激活类名"

---

二、通过代码跳转路由：

$router.push()方法

这里用一个组件jump.vue来演示。以下html是结构

<template>
    <div id="app"> 
        //<router-link to="/home">首页</router-link>
        //<router-link to="/about">关于</router-link>

        <button @click="homeClick">首页</button>
        <button @click="aboutClick">关于</button>
        <router-view></router-view>
    </div>
   
</template>

js逻辑

<script>
    export default{
        name:'App',
        methods:{
            homeClick(){
              //history.pushState这个不用，用vue提供的api
              this.$router.push("/home");
            },
            aboutClick(){
             //也可以用类似replace的方法
              this.$router.replace("/about");
            }
        }
    }
</script>

样式

<style scoped>

</style>>

---

三、动态路由

/路径 + /数据

动态路由就是除了有路径还跟上数据
如/user/aaa 或 /user/bbb
除了有前面的/user之外，后面还跟上了用户的ID

这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)

使用方法:

1、router路由规则配置

//1、router路由规则配置
    {
        path:'/user/:id',
        component:User
    }

2、利用v-bind:to=’/路径/+数据’将数据绑到路径后<–>

<!-->2、利用v-bind:to='/路径/+数据'将数据绑到路径后<-->
<router-link :to="/user/+userId">用户</router-link>
<script>
    export default {
      name:user,
      data{
           userId:aaa
          }
    }
</script>

3、使用获得的数据

<!-->3、使用获得的数据<-->
    <div>
        <h2>{{$route.params.id}}</h2>
        <!-->注意是route，而不是router<-->
    </div>

---

四、路由懒加载

概念解释，场景描述

名词解释：懒加载-用到时才加载
当打包构建应用时，JavaScript包会变得非常大(页面最终被打包到一个js文件)，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

懒加载做了什么？：
路由懒加载的主要作用是将路由对应的组件打包成一个个的js代码块
只有在这个路由被访问到的时候，才加载对应的组件。

懒加载的三种方式

方式一：结合Vue的异步组件和Webpack的代码分析

const Home = resolve =>{require.ensure(['../components/Home.vue'], () =>{resolve(require('../components/Home.vue'))})}

方式二：AMD写法

const About = resolve =>require(['../components/About.vue'],resolve)

方式三(就它了)：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import('../components/Home.vue') 

---

图说懒加载:

五、嵌套路由

概念场景描述

比如在home页面中，我们希望通过/about/news 和 /about/message访问不同内容
一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

嵌套路由实现步骤

1、创建对应的子组件，并且在路由映射中配置对应的子路由
创建.vue组件 《HomeMessage.vue》

 <template>
    <div> 
        <h2>俺是新闻</h2>
    </div>
</template>
<script>
    export default{
        name:'HomeMessage'
    }
</script>
<style scoped>
</style>>

2、在路由映射中
A、导入组件并实现懒加载；B、配置对应的子路由

//在路由映射中配置对应的子路由
//懒加载
const Home = () => import('../components/Home')
const HomeMessage = () => import('../components/HomeMessage')
const HomeNews = () => import('../components/HomeNews')
//精华路由规则
const routers = [
    {
      path: '',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      children:[
          {
            path: '',
            redirect: '/home/HomeMessage'
          }，
           {
            path: '',
            component: HomeMessage
          }，
           {
            path: '',
            component: HomeNews
          }
      ]
    },
]

3、在组件内部使用标签

<!-->配置Home.vue（因为那两个组件最后是渲染在Home中）<-->
<template>
  <div class="home">
    <h2>俺是home</h2>

    <router-link to="/home/HomeMessage">消息</router-link>
    <router-link to="/home/HomeNews">新闻</router-link>
    <router-view></router-view>
  </div>
</template>

---

六、路由参数传递

方式一：params类型(get味)-即上述动态路由

1、配置路由格式：/router/:id

//1.params类型
//配置路由格式：/router/:id
{
    path:'/user/:id',
    component:User
}

2、传递的方式：在path后面跟上对应的值

<!-->
传递后形成的路径：/router/123  |  /router/abc
参数来自组件的data
<-->
<router-link :to="/user/+userId">用户</router-link>

方式二：query类型(post味)

1、配置路由格式：/router,也就是普通配置

{
    name: '/profile',
    component: Profile
}

2、传递的方式：对象中使用query的key作为传递方式

<router-link :to="{path:'/path',query{name:'张三',age:18}}}">用户</router-link>

<!-->传递后形成的路径：/router?id=123  |   /router?id=abc<-->

URL协议

补充URL协议：
scheme://host:port/opath?query#fragment
协议://主机:端口/路径?查询

例子(路由参数传递+代码跳转路由)

定义事件：
methods:{
    paramsClick(){
        //params跳
        this.$router.push('/user/'+this.userId)
    },
    queryClick(){
        //query跳
        this.$router.push({
            path:'/profile',
            query:{
                name:'张三',
                age:'18'
            }
        })
    }

}

---

七、vue-router全局导航守卫

所谓导航守卫，其实就是：跳转对应路由，修改对应title

简单实现(仅作思考)

//在对应的组件的
     created(){
          doucument.title='当前页';
    }

高级货 router.beforeEach()

//router.beforeEach( function(){} )
router.beforeEach((to，from，next)=>{
      //从from跳转到to
      //当存在嵌套路由时单单to.meta拿不到title，所以加个matched[0]
      doucument.title=to.matched[0].meta.title;
      next();
   })


//配置路由规则，就是路由对象里的路由规则; 
//meta:元数据,描述数据的数据
   {
    name: '/home',
    component: Home,
    meta:{
        title:'首页'
    }
} 

补充知识意思意思：
hook(钩子)
前置钩子、(守卫guard)
router.beforeEach
后置钩子(hook)
router.afterEach
使用afterEach不用调用next()
以上导航守卫都是全局守卫
还有路由独享守卫(在路由规则里面加beforeEach)，组件内的守卫

---

八、vue-router-keep-alive

场景描述

路由切换组件的时候，其实每次都是销毁旧组件，创建新组件。想要这个组件一直存在，于是就有了。。。

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染
router-view也是一个组件，如果直接被包在keep-alive里面，所以路径匹配到的视图组件都会被缓存

使用：

  <keep-alive>
      <router-view></router-view>
  </keep-alive>

好处，避免了频繁创建销毁，提高了性能

重要属性：include、exclude
include-字符串或正则表达式，只有匹配的组件会被缓存
exclude-字符串或正则表达式，任何匹配的组件都不会被缓存

<keep-alive exclude='Profile,User'>
    <router-view></router-view>
</keep-alive>

总结

哦弥陀佛，善哉善哉，恭喜施主，修成路由。