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>