Vue路由的基本使用

1、相关理解

1.1 vue-router的理解

vue的一个插件库，专门用来实现SPA应用的

1.2 对SPA应用的理解

1、单页Web应用（single page web application，SPA）

2、整个页面只有一个完整的页面。index.html

3、点击页面中的导航链接不会刷新页面，只做页面的局部更新

4、数据需要通过ajax请求获取

1.3 路由的理解

1、理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。

2、前端路由：key是路径，value就是组件

 

2、基本使用

1、安装vue-router，命令：npm i vue-router 

以vue2项目为例【注意：vue-router4,只能用在vue3中，vue-router3，才能用在vue2中】

npm i vue-router@3

2、应有插件：Vue.use(VueRouter)

3、src下新建router文件夹，编写route配置项

import Vue from 'vue'

import VueRouter from 'vue-router' // 引入VueRouter

Vue.use(VueRouter) // 应用插件

// 引入组件
import About from '../package/About'
import Home from '../package/Home'


// 编写配置项
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component:About,
    },
    {
      path: '/home',
      component:Home,
    }
  ]
})


export default router

4、在main.js中引入router

...
// 引入路由
import router from './router/index'
...
 new Vue({
   ...
  router, // 使用路由 
  ...
  render: h => h(App),
}).$mount('#app')

5、在组件中使用

<template>
  <div id="app">
    <!-- 实现切换 （active-class可以配置高亮样式）   -->
    <router-link active-class="active" to="/home">Home</router-link>
    <router-link active-class="active" to="/about">About</router-link>


    <!-- 指定展示位置 -->
    <router-view class="container"></router-view>
  </div>
</template>

3、几个注意点

1、路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2、通过路由切换.''隐藏'了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3、每个组件都有自己的$route属性，里面存储着自己的路由信息

4、整个应用只有一个router，可以通过组件的$router属性获取到。