路由的添加和使用

下载安装

npm install vue-router
说明：现在安装的版本默认是vue-router4,对应着vue3
​
我们现在用的是vue2,所以我们要下载vue-router@3.5.2

添加路由模块

工程化方式使用路由

@/router/index.js

我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

路由使用完整流程

1.工程化
2.创建路由对象，添加路由配置
 - routes:添加路由配置
3.导出
4.在main.js中引入并注入
 - router:实现路由注入
5.在App.vue根组件中添加router-view
 - router-view:路由所映射组件的展示区域--展示出口
6.在App.vue中添加路由超链接
 - router-link:添加路由超链接

工程化

import Vue from 'vue'
// 引入路由第三方包
import VueRouter from 'vue-router'
// 在vue项目中使用vue-router进行管理
Vue.use(VueRouter)
​

添加路由模块

import Vue from 'vue'
// 引入路由第三方包
import VueRouter from 'vue-router'
// 在vue项目中使用vue-router进行管理
Vue.use(VueRouter)
​
// 引入组件
import Login from '@/views/login.vue'
import Index from '@/views/index.vue'
​
// 创建路由实例，进行路由配置
const router = new VueRouter({
  // 1.通过routes添加路由配置，可以添加多个路由配置，routes是一个数组
  routes: [
    // 2.添加单个路由配置，每个路由配置是一个对象，常用的配置项有：
    // path:路由路径
    // component:组件实例，引入组件就会有组件实例
    {
      path: '/login',
      component: Login
    },
    {
      path: '/index',
      component: Index
    }
  ]
})
​
// 将路由实例导出
export default router
​

在main.js中注入路由

• 在main.js中引入路由模块
• 在new Vue中注入路由:从而让整个应用都有路由功能

// 引入路由模块
import router from '@/router/index.js'
​
// Vue：本质功能就是进行渲染
new Vue({
  router,
  // 渲染这个组件
  render: h => h(App)
}).$mount('#ppa') 

在App.vue根组件中添加router-view

<div id="app">
    我们希望路由映射的组件在这里渲染
    <router-view></router-view>
</div>

在页面中添加路由超链接

我们希望路由映射的组件在这里渲染
<router-link to='/login'>登陆</router-link> &nbsp;
<router-link to='/index'>首页</router-link>

\