本文详细讲解了Vue Router的安装、路由应用、路由参数、路由嵌套、命名的路由视图、路由重定向、过渡动画以及常用属性。通过实例展示了如何设置路由参数、嵌套路由、实现路由重定向以及创建路由跳转动画。
路由就是根据不同的地址跳到不同的页面。说到前端路由不得不提单页面应用。单页面应用页面进行切换时，视觉上感觉是页面的切换，单其实页面一直没有刷新。只是通过js让页面看起来像是到了另外一个页面。Vue Router是Vue.js的官方路由器。它与Vue.js核心集成，使得使用Vue.js构建单页应用程序变得轻而易举。
本文讲解功能如下：
- 1.安装
- 2.路由如何应用的
- 3.路由参数
- 4.路由嵌套
- 5.命名路由和命名视图
- 6.路由重定向
- 7.使用过渡制作路由跳转动画
- 8.
<router-link>常用属性
1.Vue Router的安装
Vue Router使用方式灵活，可以根据自己的喜好安装。
-
1.直接下载安装的方式
https://unpkg.com/vue-router/dist/vue-router.js如：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -
2.使用npm安装
可以使用npm install vue-router --save安装，我自己都是使用淘宝镜像cnpm install vue-router --save安装，这样速度回快一些。
如下：
在项目中都是使用 webpack 构建项目脚手架配置时，是否安装vue-router 选项，选择Y即可安装vue-router 。
2.路由应用过程
-
下载好vue-router后，在使用时，首先要导入vue-router库，注册路由，然后在实例化vue-router时建立路由映射关系。
main.js文件如下：
import Vue from 'vue' import App from './App' import VRouter from 'vue-router' import Animal from './components/animal' import Fruit from './components/fruit' Vue.config.productionTip = false //注册路由 Vue.use(VRouter) //实例化router let router = new VRouter({ //路由映射表 routers:[ { //什么样的地址使用什么样的组件 path:'/animal', component: Animal }, { path:'/fruit', component: Fruit } ] }) /* eslint-disable no-new */ //// 创建和挂载根实例。要通过 router 配置参数注入路由，让整个应用都有路由功能 new Vue({ el: '#app', //router: router router, components: { App }, template: '<App/>' })APP.vue文件如下：
<template> <div id="app"> <img src="./assets/logo.png"> <!-- //设置路由在哪里显示 --> <router-view></router-view> <!-- //router-link呈现a标签超链接的效果 --> <router-link :to="{path:'animal'}">to animal</router-link> <router-link :to="{path:'fruit'}">to fruit</router-link> </div> </template> <script> export default { name: 'App', components: { }, //data()必须是函数 data() { return { } }, } </script>实现效果如下：
实现的功能：
当点击to animal 按钮时，地址栏URL会发生变化，router-view里面会被渲染成对应的内容即页面显示animal组件中的内容。同理点击to fruit按钮时，页面显示fruit组件中的内容。并且刷新页面不会跳到首页。
运行步骤：
1.当router-link对应的标签被点击时，比如此时点击to animal，to的值是/animal,那么实际的地址就是当前页面地址+#/animal。2.Vue会找到当前vue实例的路由里的routes里面path为/animal的路由。
3.会将找到的这一行记录的模板component渲染到router-view里面。
3.路由参数
-
1.路由参数的设置
路由参数像下面这样，在地址栏URL后面添加type等访问页面的参数。
路由参数的方法就是在路由映射表中设置，动态段由冒号:表示，如下：
路由参数设置规则如下：
-
2.组件内部获取参数
路由接受参数以后，路由会向每个组件的this.$route对象插入当前页面的params参数。匹配路径时，动态段的值this.$route.params在每个组件中公开，因此每个子组件可以通过全局对象this.$route来获取当前路由的参数。例如animal.vue组件中代码：
<template lang="html"> <div class="animal"> <h1>{{msg}}</h1> <button v-on:click="getParam">get animal route Param</button> </div> </template> <script> export default { data() { return { msg: 'i like the animal as cat !' } }, methods: { getParam(){ console.log(this.$route.params) } } }在地址栏传入参数red后，点击get animal route Param按钮，控制台输出
this.$route.params的结果就是red。运行效果如下：
$route.params注入以后就作为了组件的一个属性，也可以通过页面直接获取。如下：
效果：
4.路由嵌套
-
真正的应用程序通常由嵌套在多个级别深层的组件组成。URL的段对应于嵌套组件的某种结构。路由嵌套配置子路由表如下：
<main.js>import Vue from 'vue' import App from './App' import VRouter from 'vue-router' import Animal from './components/animal' import Fruit from './components/fruit' import RedAnimal from './components/redanimal' Vue.config.productionTip = false Vue.use(VRouter) let router = new VRouter({ mode: 'history', routes:[ { //什么样的地址使用什么样的组件 path:'/animal', component: Animal, //children配置子路由表，与主路由配置相同，由path和component组成 children: [ { path:'red', component: RedAnimal }] }, { path:'/fruit', component: Fruit } ] }) /* eslint-disable no-new */ new Vue({ el: '#app', //router: router router, components: { App }, template: '<App/>' })如上在routes路由表中配置子路由，确定在哪一个路由下跳转就在哪一个路由下配置其子路由。如上代码中，在animal组件路由中设置了其子路由RedAnimal，那么RedAnimal组件中的内容只会在animal组件下显示。
同样也可以使用router-link直接链接到animal组件下的redanimal子组件。<router-link :to="{path:'animal/red'}">to red animal</router-link>
5.命名的路由视图
-
1.命名的路由
命名路由就是在配置的路由表中给路由一个名字name，然后在router-link中就可以直接使用name。
如下<main.js>let router = new VRouter({ mode: 'history', routes:[ { //什么样的地址使用什么样的组件 path:'/animal', component: Animal, //给路由命名 name: 'animalName', //children配置子路由表，与主路由配置相同，由path和component组成 children: [ { path:'red', component: RedAnimal }] }, { path:'/fruit', component: Fruit } ] })<APP.vue>中直接使用name。
运行效果与使用<router-link :to="{path:'animal'}">to animal</router-link>相同。 -
2.命名的视图
命名视图就是也可以给route-view一个名字。如下：
如图viewA和viewB就是给视图route-view的命名。命名视图以后在component中给不同的视图指定不同的组件。
通过使用组件呈现视图，因此多个视图需要同一路径的多个组件。确保使用components（带有s）选项。
如下：
6.路由重定向
-
1.重定向也在routes配置中完成。在routes中配置path和redirect，比如要重定向/a到/b，如下
let router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })再如上面例子，当访问首页时让其重定向到animal组件页面。
如下，当访问localhost:8080时直接跳转到localhost:8080/animal。
-
2.重定向也可以定位到命名路线。
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })
7.使用过渡制作路由跳转动画
- 过渡transition可以用v-show、v-if以及动态组件中，也可以用在路由router-view中。因为router-view也是具有切换功能。
- 给transition一个名称name，然后根据与名字在不同的class中进行CSS3动画的设置。
- keep-alive也可以配合router-view使用，用于缓存。
- keep-alive用于在页面几个视图中间切换时，切换过得视图会被缓存起来，如果不加keep-alive每次都会进行重新请求组件，比较消耗资源。
8.<router-link> 常用属性
此部分来自菜鸟教程。详细参考菜鸟教程
-
1.to：表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
//<!-- 字符串 --> <router-link to="home">Home</router-link> //<!-- 渲染结果 --> <a href="home">Home</a> //<!-- 使用 v-bind 的 JS 表达式 --> <router-link v-bind:to="'home'">Home</router-link> //<!-- 不写 v-bind 也可以，就像绑定别的属性一样 --> <router-link :to="'home'">Home</router-link> //<!-- 同上 --> <router-link :to="{ path: 'home' }">Home</router-link> //<!-- 命名的路由 --> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> //<!-- 带查询参数，下面的结果为 /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link> -
2.tag：有时候想要 渲染成某种标签，例如
li标签。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。<router-link to="/foo" tag="li">foo</router-link> //<!-- 渲染结果 --> <li>foo</li><router-link :to="{path:'fruit'}" tag="li">to fruit</router-link>
每天快乐一点点，充实一点点，开心一点点，加油。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
