（简）vue-router路由

vue-router（路由）

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

安装路由

1.在用vue-cli构建项目的时候我们已经使用vue-router（详见如下图一），所以main.js已经引入router（vue-router）（详见如图二）。
图一：

图二：

2.如果在vue-cli构建项目的时没使用vue-route选择‘N’，则可输入npm install vue-router --save-dev，安装路由。

3.解读router/index.js文件

import Vue from 'vue'          //引入vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' 引入根目录下的Hello.vue组件

Vue.use(Router) //Vue全局使用Router

export default new Router({
  routes: [                   //配置路由，这里是个数组
    {                         //每一个链接都是一个对象
      path: '/',              //链接路径
      component: HelloWorld,      //对应的组件模板
      name:'HelloWorld',             //路由名称
    }
    ]
    )} 

简单实例

1.在components下新建个Hi.vue文件

2、在router/index.js 配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: HelloWorld,
      name:'hello',
     
    },
    {
      path: '/hi',
      component: Hi,
      name:'hi',
    }
    ]
    })

运行结果

router-link制作导航

现在通过在地址栏改变字符串地址，已经可以实现页面内容的变化了。但并不满足需求，我们需要的是在页面上有个像样的导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要标签，可来看一下它的语法。

<router-link to="/">[显示字段]</router-link>

• to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，
• [显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页等。

了解router-link的基本语法后：
1.在App.vue文件中加

<p>导航
    <router-link to="/">首页</router-link>
    <router-link to="/hi">hi页面</router-link>
 </p>

运行结果

注释：点击首页就显示首页内容，点击hi页面切换hi页面内容。

子路由配置

1.先在components下建Hi1、Hi2两个vue文件作为Hi的子页面。

2.在App.vue添加两个导航

	<router-link to="/hi/hi1">-hi1页面</router-link>
    <router-link to="/hi/hi2">-hi2页面</router-link>

3、把Hi.vue改成一个通用的模板，加入标签，给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都相当于“Hi页面”的子页面，有点想继承关系。我们在“Hi页面”里加入标签。

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <router-view/>
  </div>
</template>

4.在index.js配置路由，子路由的写法是在原有的路由配置下加入children字段。

children:[
{path:’/’,component:xxx},
{path:‘xx’,component:xxx},
]

children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。具体看一下这个子路由的配置写法。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: HelloWorld,
      name:'hello',
     
    },
    {
      path: '/hi',
      component: Hi,
      name:'hi',
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
     
    }
    
  ]
})

运行结果

注释:点击hi1和hi2页面都是在hi页面下切换