路由的使用

定义：

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

路由：route        一组key-v的对应关系(路径的改变对应的组件进行切换)

路由器：router    多个路由需要路由器管理

为了实现单页面应用(SPA)

安装路由

npm i vue-router@3   安装3版本

在src根目录创建router目录，在目录中创建index.js，代码如下：

导入vue

import Vue from 'vue';

导入vue-router

import VueRouter from 'vue-router'

应用插件

Vue.use(VueRouter)

创建router规则对象

const routes = [     ]

创建router

const router = new VueRouter({     routes    })

导出router

export default router

main.js 中进行挂载

import Vue from 'vue'
import App from './App.vue'
//关闭生产提示
Vue.config.productionTip = false
import router from './router'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

 创建路由组件

说明：

路由组件  pages  

一般组件  components

路由组件多了两个属性： $route   $router

路由规则：（rrouter/index.js）

导入组件

import About from '../pages/About'

routes:[
   {
      path:'/about',
      component:About
   }
]

使用路由

该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签。

<router-link to="/about" active-class="hover">关于我们</router-link>

该标签会根据当前的路径，动态渲染出不同的组件

<router-view></router-view>

router-link属性：

to：用于指定跳转的路径。

tag：tag可以指定<router-link>之后渲染成什么组件。

replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。

active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

mode属性：

hash模式：vue的路由默认是hash模式，地址栏后面会带一个#号。

history模式：mode=”history”

区别：

1：hash，兼容性好，history旧版本浏览器不兼容

2：hash带的#不会发送给服务器，history会发送给服务器，程序部署上线时需要后端人员支持，解决404刷新问题。配置一下apache或是nginx的url重定向，重定向到你的首页路由上。

默认路径：

{
	  path: '/',
	  redirect: '/about'
},