vue全家桶之（三）Vue--router浅谈与应用

对于我这个前端萌新来说，对vue-router的理解并不深，在这里把学到的东西和自己的见解分享出来，请各位大佬多多指教。

一、首先，什么是路由

    路由其实就是一种指向，比如说我点击屏幕的home按钮，那么进入的就是home页面，点击的是search按钮，那么进入的就是search页面，也可以说是一种映射关系，也可以说是导航的应用，十分类似。

二、路由的三个基本概念 route、router、routes

    这三个概念在刚开始的时候会经常出错，要么少个s，要么多个r，这很正常，熟能生巧。

    1.route：一条路由。其实route代表的是仅仅就是一条route指向，home按钮指向home页面，search按钮指向search页面。

    2.routes：一组路由。因为页面不可能只有一个，所以在注册配置路由的时候会是一组的路由，routes他是一个数组，里面会有n个路由配置。

    3.router：router可以说是一种机制，是对路由的管理，也可以说是路由器，通常在入口.JS main.js中来配置路由器。另外在vue实例中引用router，这很关键。当请求不同的路由的时候，就需要router去routes中找到不同路由对应的页面。

三、vue-router使用

1、话不多说，下载 npm install vue-router --save

2、下载完之后，就是配置路由对象，创建一个router的文件在，在其中创建indexJS的文件，在其中import引用vue和vue-router还要声明vue使用VueRouter，然后就是import引入路由组件，注册路由，在VueRouter实例中注册路由，注意：这里是routes数组，里面有n个路由，配置好路由再去mainJS中配置路由器。

import Vue from 'vue'
import VueRouter from 'vue-router'

import About from '../views/About'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'
//声明使用router插件
Vue.use(VueRouter);
//内部定义并注册了两个组件标签(router-link/router-view)
export default new VueRouter({
  //注册应用中所有的路由
  routes:[
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children:[    //这里为嵌套子路由，路由中的路由，在父级路由中用children数组的形式显示
        {
          path:'/home/news',
          component:News
        },
        {
          path:'/home/message',
          component:Message
        },
        {
          path:'',    
          redirect:'/home/news'    //这里的重定向注意路径要对
        },
      ]
    },
    {//这里是重定向，指定第一次打开默认显示页面
      path:'/',
      redirect:'/about'   //重定向请求about
    }
  ]
})

 3、接下来就是在main.js中注册路由器，一共两步（下面标红代码）：

     （1）.import引入注册路由文件。我这里是router中的index.js文件，就是引入上面的那个文件

     （2）、在vue实例中注册路由器，一个router

//入口main.js
import Vue from 'vue'
import App from './App'
import router from './router' //默认index

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//配置对象属性名都是一些确定的名称，不能随意修改
  el: '#app',
  components: { App },
  template: '<App/>',
  router  //注册路由器

})import router from './router' //默认index

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//配置对象属性名都是一些确定的名称，不能随意修改
  el: '#app',
  components: { App },
  template: '<App/>',
  router  //注册路由器

})

4、App.vue中的<router-link>和<router-view>的使用（在这里我应用了boorstrap的css，所以会有一些boot的标签）

那么对于<router-link><router-view>的理解这里借用一下官网的解释

https://router.vuejs.org/zh/api/#router-link

 

<router-link>

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link> 比起写死的 <a href="..."> 会好一些，理由如下：

• 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。

• 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。

• 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

 

https://router.vuejs.org/zh/api/#router-view

<router-view>

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

其他属性 (非 router-view 使用的属性) 都直接传给渲染的组件， 很多时候，每个路由的数据都是包含在路由参数中。

因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>：

<keep-alive>可以保存状态

<template>
  <div class="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由链接-->
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--显示当前组件-->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>

<style>

</style>

在这个附上这个例子的小demo：https://github.com/JSeroldxu/vue-router 记得npm install

好了，谢谢观看，希望对你有帮助。