【Vue】Vue-router

Vue-router

零、什么是Vue-router？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

·嵌套的路由/视图表
·模块化的、基于组件的路由配置
·路由参数、查询、通配符
·基于 Vue.js 过渡系统的视图过渡效果
·细粒度的导航控制
·带有自动激活的 CSS class 的链接
·HTML5 历史模式或 hash 模式，在 IE9 中自动降级
·自定义的滚动条行为

一、动态路由匹配

• 第一种模式：
  通过固定地址后面不同的参数实现不同的页面内容，即“动态”地进行路由匹配
• 第二种模式：
  跟第一种一样，只是我们还可以继续添加参数。

二、嵌套路由

就是在route组件后再加上一个children部分表示该路由下的嵌套路由：

app.vue是组件的入口文件，里面的定义的都是一级路由，就像上图中的GoodsList，而GoodsList下面的二级路由需要在GoodsList组件中去用定义。也就是我们需要在/goods页面下去定义一个router-view充当载体去渲染我们的Title和Image组件。

是用来实现路由之间的跳转，但是注意，其中的路径一定要写绝对路径。

三、编程式路由

• 所谓编程式路由，顾名思义，就是用编程的方法去实现路由的跳转。
  我们给在页面中部署一个按钮，给他绑上一个点击时会触发的方法jump()

<template>
    <div>
        这是商品列表页面
        <button @click="jump">button - 跳转到购物车页面</button>
    </div>
</template>
<style>
</style>
<script>
export default({
    data() {
        return{
        }
    },
    methods:{
        jump(){
            //第一种：直接输入绝对路径（带'/'的一般都是绝对路径，相对路径不带，会直接拼接父路径）
            // this.$router.push("/cart");
            //第二种：不传字符串，传一个对象
            // this.$router.push( {path:'/cart'} );
            //第三种：传参
            this.$router.push( {path:'/cart?goodsId=123'} );
        }
    }
})
</script>

四、命名路由和命名视图

• 什么是命名路由和命名视图？
  ·给路由定义不同的名字，根据名字进行匹配
  ·给不同的router-view定义名字，通过名字进行对应组件的渲染

我们在App.vue中录入：

看到了吗，我们在App.vue中弄了三块，并给每一个都设置了一个名字，然后他们就会根据名字去查找相关的视图然后呈现到我们的页面中。

在index.js文件中：

在默认页面就声明出来这三个组件，然后这三个组件的内容便可以在默认页面中出现了。

注意：使用这种方式我们发现，一个路径下不仅仅只有一个组件，所以component需要更改为components，切记注意！