Vue之路由的安装与配置

一：安装vue-router包
npm i vue-router@3.5.2 -S
二：创建路由模块
在src源代码目录下，创建router/index.js路由模块，并初始化代码：

1. //导入Vue和VueRouter的包.
   import Vue from ‘vue’
   import VueRouter from ‘vue-router’

2. //调用Vue.use()函数，把VueRouter安装为Vue的插件
   Vue.use(VueRouter)

3. //创建路由的实例对象
   const router = new VueRouter()

4. //向外共享路由的实例对象
   export default router

三：导入并挂载路由模块
// 在vue项目中要想把路由用起来必须把路由实例对象通过下面的方式进行挂载
在main.js中：
// 导入路由模块，拿到路由的实例对象
import router from ‘@/router/index.js’

在new Vue({
router:router
})
四：声明路由链接和占位符
使用路由：例如

<!-- 当安装和配置了vue-router后，就可以使用router-link来代替a链接 -->
    <!-- <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a> -->
    
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

<!-- 它的作用只是个占位符 -->
<router-view></router-view>

要想hash地址与组件有联系就必须在router/index.js中

// 导入需要的组件
import Home from ‘@/components/Home.vue’
import Movie from ‘@/components/Movie.vue’
import About from ‘@/components/About.vue’

然后在VueRouter（{
// 路由规则，定义hash地址与组件之间的对应关系
routes: [
{ path: ‘/home’, component: Home },
{ path: ‘/movie’, component: Movie },
{ path: ‘/about’, component: About }
}）