Vue学习五（Vue-router）

Vue-Router官网

一、什么是路由

路由（routing）就是通过互联的网络把信息从原地址传输到目的地址的活动。

生活中我们常常接触到的路由器，你有想过它是做什么的吗？

路由器提供了两种机制：路由和转送。

• 路由是决定数据包从来源到目的地的路径；
• 转送将输入端的数据转移到合适的输出端。

路由中有一个非常重要的概念叫 路由表。

• 路由表本质上就是一个映射表，决定数据包的指向。

二、认识Vue-router

Vue-router是基于路由和组件的

• 路由用于设定访问路径，将路径和组件映射起来；
• 在Vue-router的单页面应用中，页面的路径的改变就是组件的切换。

三、Vue-router的安装和使用

1.安装

npm install vue-router --save

2.在模块化工程中使用它

因为是一个插件,所以可以通过Vue.use（）来安装路由功能

• 第一步：导入路由对象，并且调用Vue.use(VueRouter)

• 第二步：创建路由实例，并且传入路由映射配置

• 第三步：在Vue实例中挂载创建的路由实例

3.路由的默认路径

让用户第一次进入该网页的时候，router-view就可以渲染时候首页的内容。

如果想要把默认情况下的Url的hash变成html5的history模式，在index.js中加入：

4.通过代码跳转路由

将App.vue中的router-link两行代码改成：

<button @click="homeClick">Home</button>
<button @click="aboutClick">About</button>

在App.vue中的script中添加methods：

四、router-link

在前面的中,我们只是使用了一个属性: to,用于指定跳转的路径。

router-link中还有一些其他的属性：

（1)tag：tag可以指定之后渲染成什么组件

<router-link to="/home" tag="button">Home</router-link>

比如上面的代码会被渲染成一个元素,而不是。

（2）replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。

（3）active-class：当对应的路由匹配成功时,会自动给当前元素设置一个“router-link-active”的class，设置active-class可以修改默认的名称。

• 在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类。

• 但是通常不会修改类的属性,会直接使用默认的router-link-active即可。

五、Vue-router动态路由的使用

六、Vue-router打包文件的解析

npm run build 来打包文件。

七、Vue-router路由懒加载的使用

当打包构建应用时，Javascript包会变得非常大，影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候加载对应组件，这样就更加高效了

1.路由懒加载做了什么？

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

2.路由懒加载的效果

3.懒加载的方式

将以下两行代码在index.js中注释掉：

import Home from '../components/Home'
import About from '../components/About'

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

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

（2）方式二：AMD写法

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

（3）方式三：在ES6中，我们可以有更加简单的方式来组织Vue异步组件和Webpack的代码分割

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

然后再npm run build重新打包一下，npm run dev运行程序。

八、Vue-router路由的嵌套使用

1.嵌套路由是一个很常见的功能：

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

路径和组件的关系如图：

2.实现嵌套路由的两个步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由；
• 在组件内部使用标签。

3.Home界面中嵌套HomeNews和HomeMessage

（1）添加HomeNews和HomeMessage两个页面

//HomeNews
<template>
    <div>
        <ul>
            <li>
                News11111111111
            </li>
            <li>
                News22222222222
            </li>
            <li>
                News33333333333
            </li>
            <li>
                News44444444444
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:"HomeNews"
}
</script>

<style scoped>

</style>


//HomeMessage
<template>
    <div>
        <ul>
            <li>消息1</li>
            <li>消息2</li>
            <li>消息3</li>
            <li>消息4</li>
        </ul>
    </div>
</template>

<script>
export default {
    name:"HomeMessage"
}
</script>

<style scoped>

</style>

（2）在index.js中添加组件

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



// 1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象z
const routes = [{
        path: '',
        // redirect重定向
        redirect: '/home'
    }, {
        path: '/home',
        component: Home,
        children: [{
                path: '',
                redirect: 'homeNews'
            },
            {
                path: 'homeNews',
                component: HomeNews
            },
            {
                path: 'homeMessage',
                component: HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: About
    }
];

// 3.创建router实例
const router = new VueRouter({
    routes,
    mode: 'history'
})

// 4.导出router实例
export default router

（3）在Home.vue的组件中添加三行代码来引入嵌套的子路由

<router-link to="/home/homeNews">新闻</router-link>
<router-link to="/home/homeMessage">消息</router-link>
<router-view></router-view>

九、Vue-router的参数传递（一）

1.准备工作

• 创建新的组件profile.vue
• 配置路由映射
• 添加跳转的

2.传递参数的方式

传递参数只要有两种类型：params和query

params的类型：

• 配置路由格式：/router/:id
• 传递的方式：在path后面跟上对应的值
• 传递后形成的路径：/router/123或/router/abc

query的类型：

• 配置路由格式：/router，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/router?id=123或者/router?id=abc

十、Vue-router中$router和$route的区别

$router为VueRouter实例，想要导航到不同的Url，则使用$router.push;

$route为当前router跳转对象里面可以获取name、path、query、params等。

十一、全局导航守卫

1.为什么要用导航守卫

–我们来考虑一个需求:在一个SPA应用中,如何改变网页的标题呢?

• 网页标题是通过
• 但是我们可以通过JavaScript来修改

那么在Vue项目中,在哪里修改?什么时候修改比较合适呢?

2.普通修改模式

我们比较容易想到的修改标题的位置是每一个路由对应的组件vue文件中；

通过mounted声明周期函数,执行对应的代码进行修改即可。

但是当页面比较多时,这种方式不容易维护（因为需要在多个页面执行类似的代码）。

3.导航守卫修改模式

（1）什么是导航守卫？

• vue-router提供的导航守卫主要用来监听监听路由的进入和离开的。
• vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发。

（2）修改方法：

• 首先在index.js中加上meta属性，并给title赋值，即为页面的标题；
• 在index.js中加入router.beforeEach或者router.afterEach函数。

//前置守卫guard
router.beforeEach((to, from, next) => {
    // 从from跳转到to
    document.title = to.matched[0].meta.title;
    next();
})

//to:即将要进入的目标的路由对象.
//from:当前导航即将要离开的路由对象.
//next:调用该方法后,才能进入下一个钩子.

如果是后置钩子，也就是afterEach，不需要主动调用next（）函数。

// 后置钩子hook
router.afterEach((to, from) => {
    document.title = to.matched[0].meta.title;
})

（3）补充

上面我们使用的是全局守卫；除此之外还有独享守卫、组件内的守卫

十二、Vue-router_keep-alive以及其他问题

• keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
• 他有两个两个重要的属性：
  • include：字符串或正则表达，只有匹配的组件会被缓存；
  • exclude：字符串或正则表达式，任何匹配的组件都不会被缓存。
• router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存.
• 通过create声明函数来验证

以下要实现的是我们在home中点入了message当跳转到其他页面又跳回到home的时候依旧保持在message中，而不会回到news

//App.vue:
<keep-alive>
    <router-view>
    </router-view>
</keep-alive>

//index.js:
<script>
export default {
    name:"Home",
    data(){
        return{
            message:'nihao',
            path:'/home/homeNews'
        }
    },
    created(){
        console.log("home created");
    },
    destroyed(){
        console.log("home destroyed");
    },

    //下面的两个函数只有当我们使用了keep-alive的时候才会被调用。
    activated(){
        // console.log("home activated");
        this.$router.push(this.path)
    },
    beforeRouteLeave(to,from,next){
        console.log(this.$route.path);
        this.path = this.$route.path;
        next();
    }
}
</script>