超详细的Vue-router (路由)

    由于Vue在 开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起 来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是 SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

一、安装

如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router。
这里还是说一下安装：

npm install vue-router

二、创建组件

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src****文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：

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

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

            export default new Router({
                routes: [ //配置路由，这里是个数组
              { //每一个链接都是一个对象
                        path: '/', //链接路径
                        name: 'Hello', //路由名称，
                        component: Hello //对应的组件模板
                    }， {
                  path: '/hi',
                        component: Hi,
                        children: [ //子路由,嵌套路由 
                            {
                                path: '/',
                                component: Hi
                            },
                            {
                                path: 'hi1',
                                component: Hi1
                            },
                            {
                                path: 'hi2',
                                component: Hi2
                            },
                        ]
                    }
                ]
            })

三、router-link制作导航

1.router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：被选中的router-link将自动添加一个class属性值.router-link-active。

<router-link to="/">[text]</router-link>

• to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" ，

    [text] ：就是我们要显示给用户的导航名称。
  

四、vue-router参数传递

    **:****冒号的形式传递参数如图**

//引入文件
import User from '../views/User.vue'
import Produce from '../views/Produce.vue'
//定义路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/produce/:id',
    name: 'produce',
    component: Produce
  }
]
 

接收

<template>
    <p>我是产品页面</p>
    <p>{{$route.params.id}}</p>
</template>

五、路由跳转

<template>
    <h2>通过js方式跳转页面</h2>
    <button @click="$router.back()">返回</button>
    <button @click="$router.go(-1)">返回</button>
    <button @click="$router.forward()">前进</button>
    <button @click="$router.go(1)">前进</button>
    <hr>
    <button @click="$router.push('/about')">关于</button>
    <button @click="$router.replace('/about')">关于-不留历史记录：替换</button>
</template>