vue-cli 工程中 vue-router 路由的基本用法

vue-router使用
参考官方文档 
https://router.vuejs.org/zh-cn/
------------------------------------------

路由安装
npm install --save vue-router

安装完成后，打开package.json，如果看到这个"vue-router": 版本号,
就代表安装成功了
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

路由使用
1.如果你在安装脚手架的时候选择安装了路由，那么在你的目录下
找到router文件夹的index.js,在这里配置你的路由

打开这个index.js应该有这些东西：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//export default 是对外暴露这个配置
export default new Router({
  routes: []
})
你的可能跟我的有些不一样，我这里删除了原先定义的路由

2.如果你安装脚手架的时候没有选择安装路由,那就在src目录下
新建一个router文件和一个index.js,在这个js文件里配置全部
路由，推荐把路由配置文件单独抽离出来

这样做完之后，打开main.js,使用下路由

import Vue from 'vue'

import App from './App'

//这里引入你刚才定义的 router下的index.js
/*
    注意：只有是index.js的文件，引入的时候不用像下边这样写
    import router from './router/index.js',
    可以省略掉indx.js,而如果是其它的名字就要引入全部
    比如：import router from './router/router.js'
*/
import router from './router'

new Vue({
  el: '#app',
  router, // 引入后在这里使用下
  components: { App },
  template: '<App/>'
})
这样搞完后，路由基本已经配置完成

使用路由

首先，我们在components文件夹下准备几个.vue文件，这里我准备了5个

Header.vue   Home.vue  Phone.vue  Shequ.vue  News.vue

Header.vue 我们当做一个导航的公共部分!这里就不贴图了

打开App.vue 引入header.vue文件
<template>
  <div id="app">
      <appheader></appheader>
      <!-- 路由匹配到的组件将渲染在这里 -->
      //<keep-alive> 标签内置组件用来缓存路由的
        <transition name="fade" mode="out-in">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
  </div>
</template>
<script>

import appheader from './components/Header'

export default {
  components:{
    appheader
  }
}
</script>

<style scoped>
// 加入一个淡入淡出效果
.fade-enter-active, .fade-leave-active{
 transition: all .3s;
}
.fade-enter, .fade-leave-to{
 opacity: 0;
}
</style>

推荐vscode 使用者下载插件   

Vue VSCode Snippets
-------------------

然后再 .vue文件中  输入vbase 回车 模板就好了

打开header.vue

<template>
    <div class="header">
        <header>
            <ul>
                <li>
                    <router-link to="/">主页</router-link>
                </li>
                <li>
                    <router-link to="/news">新闻</router-link>
                </li>
                <li>
                    <router-link to="/shequ">社区</router-link>
                </li>
                <li>
                    <router-link to="/phone">电话</router-link>
                </li>
            </ul>
        </header>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
ul li{
    list-style: none;
    float: left;
    padding: 10px;
}
header{
    background-color: #666;
    height: 45px;
}
a{
    color: #fff;
}
</style>

我们看到一个：
<router-link to="/">主页</router-link>
这个标签，官方文档解释很清楚：

<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 
通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签
所以这个to后边跟的就是你跳转的路径名字，这个必须待有，不写会报错
启动服务器，你就看到了一个导航，有的可能看不到啊，你需要修改你原先里的东西
到这里这个导航就写完了，下边我们看看怎么配置跳转路径

路由路径配置

打开router文件夹下的index.js
配置第一个路由路径：

第一种写法：

这里的path属性的值要与前边 to="/" 的名字一样，否则找不到
<router-link to="/">主页</router-link>

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import Home from '../components/Home.vue'
import News from '../components/News.vue'
import Phone from '../components/Phone.vue'
import Shequ from '../components/Shequ.vue'

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/', 
      component:Home
    },
    {
      path: '/news', 
      component:News
    },
    {
      path: '/shequ', 
      component:Shequ
    },
    {
      path: '/phone', 
      component:Phone
    },
  ]
})

第二种写法，个人比较喜欢的

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  mode:'history', //去掉地址栏的#号
  routes: [
    {
      path: '/',
      name: 'HomeLink', 
      component: (resolve) => require(['../components/Home.vue'],resolve)
    },
    {
      path: '/news',
      component: (resolve) => require(['../components/News.vue'],resolve)
    },
    {
      path: '/shequ', 
      component: (resolve) => require(['../components/Shequ.vue'],resolve)
    },
    {
      path: '/phone',
      component: (resolve) => require(['../components/Phone.vue'],resolve)
    },
  ]
})

以上路由配置完已经可以自由的跳转了，上边用到了一个name属性，意思是命名路由
    {
      path: '/',
      name: 'HomeLink', //对路由起别名
      component: (resolve) => require(['../components/Home.vue'],resolve)
    },
 然后router-link这里也可以这么写
 <router-link :to="{ name: 'HomeLink' }">User</router-link>

 如果你的地址栏带了一个#号，看的不舒服，可以配置history模式
 mode:'history',

但有时候用户可能会手动输入地址，但他要是输入一个不存在的路由
我们还要对这个进行处理，我们可以在components下再建立一个404.vue 文件
然后在router/index.js路由配置的数组中加入另一个对象
* 是匹配所有的路由，如果找不到，让它往哪去.
{
  path:'*',
  component:(resolve) => require(['../components/404.vue'],resolve)
}
或者我们使用 redirect 让它重定向到首页
{
   path:'*',
   redirect:'/'
 }

下边说一下自己怎么进行路由跳转，实际开发中，我们可能会需要
自己会进入到某一个特定的路由，你就需要在代码中加入：
router.replace(path)和router.push(path)，该方法接收传参:
举个例子：
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

**router.go(n)方法**

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，
类似 window.history.go(n)。

例子
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

关于路由传参

有时候我们的路由跳转过去，需要配置一些参数

第一种方法：

在Header.vue中
新闻路由：传参数 you
<router-link to="/news/you">新闻</router-link>

在路由的配置文件 index.js 中写法
{
  path: '/news/:name',
  props:true,
  component: (resolve) => require(['../components/News.vue'],resolve),
},

在News.vue中接收参数：这里的name就拿到了 渲染出来就是参数值you
<template>
    <div>
        新闻
        {{name}}
    </div>
</template>

<script>
    export default {
        props:['name']
    }
</script>

第二种带查询参数的路由

在Header.vue中
社区路由：传参数 userId
<router-link :to="{ name: 'Shequ', query: { userId: 123 }}">社区</router-link>

在路由的index.js中 给路由起个别名：
{
  path: '/shequ', 
  name: "Shequ",
  component: (resolve) => require(['../components/Shequ.vue'],resolve),
},

在Shequ.vue文件中接收：$route.query.userId
<!-- 带查询参数，下面的结果为 /shequ?userId=123 -->
<template>
    <div>
        社区
       {{ $route.query.userId }}
    </div>
</template>

<script>
    export default {

    }
</script>

第三种方法

Header.vue中

<router-link :to="{ name: 'Phone', params: { id: 123 }}">电话</router-link>

路由的index.js中

{
  path: '/phone/:id',
  name:'Phone',
  component: (resolve) => require(['../components/Phone.vue'],resolve)
},

Phone.vue中接收

<template>
    <div>
        电话
        {{ $route.params.id }}
    </div>
</template>

更多高级路由请参考文档，权限问题请参考路由导航守卫，组件内导航守卫