Vue2中vue-router的使用

vue-router是vue框架中的一个插件。

vue-router实现原理
     vue-router通过hash与History interface两种方式实现前端路由，更新页面内容但不重新请求页面”是前端路由原理的核心之一。

使用的具体方法
1.安装vue-router ，npm install vue-router --save(这个是下载最新版的在vue2可能不适用)

vue2可以使用npm i vue-router@3

2.导入vue-router

3.通过vue.user() 使用插件

4.创建路由对象

5.导入组件

6.配置URL和组件直接的映射关系

7.导出router对象

index.js

需要自己创建一个index.js文件

在vue-router中，通过mode参数来决定采用哪一种方式，默认hash。
history 注：如果浏览器不支持history新特性,则采用hash方式

import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
 
// 通过vue.use(插件)，安装插件
Vue.use(VueRouter)
    // 创建路由对象
const routes = [{
    path: "",
    // 重定项
    redirect: '/home'
}, {
    path: '/home',
    component: Home
}, {
    path: '/about',
    component: About
}]
const router = new VueRouter({
        // 配置URL和组价直接的映射关系
        routes,
        // history模式 
        mode: 'history'
    })
    // 将router对象传入到vue实例中
export default router

8.在main.js中导入router对象

import Vue from 'vue'
import App from './App'
import router from './router/index.js'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})
9.在index.html中使用

<template>
  <div id="app">
    <h2>hello world</h2>
    <router-link to='home'>首页</router-link>
    <router-link to='about'>关于</router-link>
    <router-view></router-view>
  </div>
</template>

9.在index.html中使用

<template>
  <div id="app">
    <h2>hello world</h2>
    <router-link to='home'>首页</router-link>
    <router-link to='about'>关于</router-link>
    <router-view></router-view>
  </div>
</template>

router-view：当路由发生改变时，重新执行render函数。router-view会找到对应的组件进行渲染。

router-link：创建路由链接标签（默认a标签），绑定对应的事件，根据属性执行路由实例不通的方法。