Vue路由基本使用的总结

介绍

路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件

安装

本地环境安装路由插件vue-router： cnpm install vue-router --save-dev
没有安装淘宝镜像的可以将 cnpm 替换成 npm

配置

两种配置方法：
1.在main.js中
2.在src/router文件夹下的index.js中
这里只说在src/router/index.js中的

• 引入：

import Vue from 'vue'
import Router from 'vue-router'

• 使用/注册：

Vue.use(Router)

• 配置
  配置路由：

export default new Router({
  routes: [
   {
        path : ‘/’,  //到时候地址栏会显示的路径
        name : ‘Home’,
        component :  Home   // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.
    },
    {
        path : ‘/content’,
        name : ‘Content’,
        component :  Content
    }
],
    mode: "history"
})

• 引入路由对应的组件地址：

import Home from '@/components/Home'
 
import Home from '@/components/Content’

• 在main.js中调用index.js的配置：

import router from './router'

• App.vue页面使用（展示）路由：
  把这个标签放到对应位置：

<router-view></router-view>

• 路由切换：把切换标签和链接改成：

<router-link  to="/">切换到Home组件</router-link>
 
<router-link  to="/content">切换到Content组件</router-link>

这里，to里边的参数和配置时，path的路径一样即可

案例

现在我们以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

1. 创建组件
首先引入vue.js和vue-router.js：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

然后创建两个组件构造器Home和About：

var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})

var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

2. 创建Router

var router = new VueRouter()

调用构造器VueRouter，创建一个路由器实例router。

3. 映射路由

router.map({
    '/home': { component: Home },
    '/about': { component: About }
})

调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。
例如：’/home’是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。

4. 使用v-link指令

<div class="list-group">
    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

在a元素上使用v-link指令跳转到指定路径。

5. 使用router-view标签

<router-view></router-view>

在页面上使用标签，它用于渲染匹配的组件。

6. 启动路由

var App = Vue.extend({})
router.start(App, '#app')

路由器的运行需要一个根组件，router.start(App, ‘#app’) 表示router会创建一个App实例，并且挂载到#app元素。
注意：
使用vue-router的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素。

编写单页面的步骤

上面的6个步骤，可以说是创建一个单页面应用的基本步骤：

JavaScript

1. 创建组件：创建单页面应用需要渲染的组件
2. 创建路由：创建VueRouter实例
3. 映射路由：调用VueRouter实例的map方法
4. 启动路由：调用VueRouter实例的start方法

HTML

1. 使用v-link指令
2. 使用标签

router.redirect
应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。
使用router.redirect方法将根路径重定向到/home路径：

router.redirect({
    '/': '/home'
})

router.redirect方法用于为路由器定义全局的重定向规则，全局的重定向会在匹配当前路径之前执行

执行过程
当用户点击v-link指令元素时，我们可以大致猜想一下这中间发生了什么事情：

• vue-router首先会去查找v-link指令的路由映射
• 然后根据路由映射找到匹配的组件
• 最后将组件渲染到router-view标签