8. Vue - Router

一、Vue Router 的使用

JavaScript:

	1.创建组件：创建单页面应用需要渲染的组件

	2.创建路由：创建VueRouter实例

	3.映射路由：调用VueRouter实例的map方法

	4.启动路由：调用VueRouter实例的start方法

HTML:

    1.使用v-link指令

    2.使用<router-view>标签

router.redirect:

    1.应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。

    2.使用router.redirect方法将根路径重定向到/home路径：

    router.redirect({'/': '/home'})

    router.redirect 方法用于为路由器定义全局的重定向规则，全局的重定向会在匹配当前路径之前执行。

执行过程:

    当用户点击v-link指令元素时，我们可以大致猜想一下这中间发生了什么事情：

    1.vue-router首先会去查找v-link指令的路由映射

    2.然后根据路由映射找到匹配的组件

    3.最后将组件渲染到<router-view>标签

1. 引入Vue和Vue-Router插件

<script src="vue.js"></script>

<script src="vue-router.js"></script>

2. HTML

<div id="box"> 

</div>

<!--定义模版-->

<template id="a">

    <div>

        第一个router

    </div>

</template>

<template id="b">

    <div>

        第二个router

    </div>

</template>

3. js

let routes = [

    {

        path:'/home',

        component:{template:'#a'},

    },

    {

        path:"/two",

        component:{template:"#b"}

    },

];

// 定义路由组件

let router = new VueRouter({

    routes

});

// 定义路由

new Vue({

    el:"#box",

    router,

})

4. 将模板增添链接

<div id="box">

    <router-link to="/one">One</router-link>

    <router-link to="/two">Two</router-link>

    <router-view></router-view>

</div>

< router-link > 默认会被渲染成一个 <a> 标签 >>>to=""为我们定义的路由

< router-view > 路由匹配到的组件将渲染在这里

5. 简单示例

<div id="app">

    <h1>路飞学城</h1>

    <!--<router-link to="/home">首页</router-link>-->

    <!--<router-link to="/course">免费课程</router-link>-->

    <!-- 命名路由,to前要加冒号 -->

    <router-link :to="{name:'home'}">首页</router-link>

    <router-link :to="{name:'course'}">免费课程</router-link>

    <!-- 路由出口 -->

    <router-view></router-view>

</div>

<script>

    let Home = {

        template: `

            <div>

                <h1>首页</h1>

            </div>`,

    };

    let Course = {

        template: `

            <div>

                <h1>免费课程</h1>

            </div>`,

    };

    let router = new VueRouter({

        mode: 'history',

        routes: [

            // 路径重定向

            {path: '', redirect: '/home'},

            // 命名路由

            {path: '/home', name: 'home', component: Home},

            {path: '/course', name: 'course', component: Course},

        ]

    });

    let app = new Vue({

        el: '#app',

        router: router,

    })

</script>

备注：mode: 'history' =>默认是hash，但是写上这个后就会出现url问题

二、补充知识

1、Vue Router定义

对于Vue这类渐进式前端开发框架，为了构建SPA(单页面应用)，需要引入前端路由系统(Vue-Router)。前端路由的核心——改变视图的同时不会向后端发出请求。

2、浏览器提供了两种支持(hash/history)

(1) hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。

比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

(2) history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

(3) 总结

这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

3. router-link

// 字符串

<router-link to="apple"> to apple</router-link>

// 对象

<router-link :to="{path:'apple'}"> to apple</router-link>

// 命名路由

<router-link :to="{name: 'applename'}"> to apple</router-link>

//直接路由带查询参数query，地址栏变成 /apple?color=red

<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>

// 命名路由带查询参数query，地址栏变成/apple?color=red

<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>

//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略

<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>

// 命名路由带路由参数params，地址栏是/apple/red

<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

4. router.push(...)

// 字符串

router.push('apple')

// 对象

router.push({path:'apple'})

// 命名路由

router.push({name: 'applename'})

//直接路由带查询参数query，地址栏变成 /apple?color=red

router.push({path: 'apple', query: {color: 'red' }})

// 命名路由带查询参数query，地址栏变成/apple?color=red

router.push({name: 'applename', query: {color: 'red' }})

//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略

router.push({path:'applename', params:{ color: 'red' }})

// 命名路由带路由参数params，地址栏是/apple/red

router.push({name:'applename', params:{ color: 'red' }})

5. 备注

(1) 关于带参数的路由总结

(1)无论是直接路由“path"还是命名路由“name”,带查询参数query,地址栏会变成“/url?查询

(2)参数名：查询参数值“;

(3)直接路由“path" 带路由参数params params 不生效;

(4)命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;

(2) 设置路由map里的path值

带路由参数params时，路由map里的path应该写成:  path:'/apple/:color' ;

带查询参数query时，路由map里的path应该写成: path:'/apple' ；

(3) 获取参数方法

在组件中：  {{$route.params.color}}

在js里： this.$route.params.color

6. vue中从一个页面传参到另一个页面

(1) 首先在home.vue中定义

updates(id){

    this.$router.push({

    path:'/world',

    name:'world',

    params:{

        id : id

        }

    })

}

(2) 在world.vue中定义

export default {

    name: '',

    data () {

      return {

        id: ''

      }

    },

    created(){

       this.getParams()

    },

    methods: {

      getParams () {

        // 取到路由带过来的参数

        var routerParams = this.$route.params.id

        // 将数据放在当前组件的数据内

        this.id = routerParams

      }

    },

    watch: {

    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可

      '$route': 'getParams'

    }

  }

三、Vue嵌套路由

1. 定义

嵌套路由是一个场景的需求，假设用户能够通过路径 /home/news 和 /home/mesages访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

2. 示例

let UserInfo = {

        template: `

            <div>

            	这是用户信息

			</div>`

    };

let UserPost = {

        template: `

            <div>

            	这是用户请求

			</div>`

    };

// 2. 定义路由

let router = new VueRouter({

    // mode: 'history',

    routes: [

    {

        path: '/user/:id',

        name: 'user',

        component: User,

        children:[

            {path:'userinfo', component: UserInfo},

            {path:'userpost', component: UserPost},],

            },

        ]

});

四、路由对象

https://www.cnblogs.com/avon/p/5943008.html

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，

并且当路由切换时，路由对象会被更新。

路由对象暴露了以下属性：

1.$route.path

  字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。

2.$route.params

  对象，包含路由中的动态片段和全匹配片段的键值对

3.$route.query

  对象，包含路由中查询参数的键值对。例如，对于/home/news/detail/01?favorite=yes

 会得到$route.query.favorite == 'yes' 。

4.$route.router

  路由规则所属的路由器（以及其所属的组件）。

5.$route.matched

  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

6.$route.name

  当前路径的名字，如果没有使用具名路径，则名字为空。

this.$router 对应的是当前app的路由对象
this.$route 对应的是当前的路由信息
路由切换的监听需用到watch侦听器

// 怎么查看每一次路由切换之后的当前路由信息呢？

watch: {

    '$route': function (to, from) {

    console.log(to);  // 要切换到的路由信息

    console.log(from);  // 切换前的路由信息

    // ajax 请求数据

    // this.data.courseList

    }

}

五、动态路由匹配

1. HTML

<div id="app">

    <router-link :to="{name:'user', params:{id: 10}}">alex</router-link>

    <router-view></router-view>

</div>

2. js

let User = {

        template: `

            <div>

                <h1>这是{{ this.$route.params.id }}的个人中心页面</h1>

                <p>当前路由的query信息{{ this.$route.query.key }}</p>

            </div>`,

};

let router = new VueRouter({

        // mode: 'history',

        routes: [

            // 添加参数冒号

            // id(id可随便取名，标识),这个属性id可以在$route.params.id中获取

            {path: '/user/:id', name: 'user', component: User},

        ]

});

let app = new Vue({

        el: '#app',

        data: {

        },

        router: router,

})

3. 记住两个参数

(1)this.$route.params获取URL中的参数

(2)this.$route.query获取URL中的查询参数

六、编程式导航

// 用代码控制页面跳转；定义课程页组件

    let Course = {

        template: `<div>

            <h1>这是免费课程页面！</h1>

            <button v-on:click="toHome">返回主页</button>

        </div>`,

        methods: {

            toHome(){

                // 编程式导航 （用代码控制页面跳转）

                this.$router.push({name: 'home'})

            }

        }

    };

巴特西