手动 vue-router 的安装和配置

手动 安装 和配置

安装vue-router 包；

npm i vue-router@3.5.2 -S

失败了

npm i vue-router@3.5.2 -S --registry https://registry.npm.taobao.org

成功！

检查 package.json 有vue-router 包；

创建路由 模块；

在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

导入并挂载路由模块；

在 main.js 中挂载

在模块化 导入的时候，如果只给了文件路径，那么会自动导入 index.js的文件；

所以可以写成

 

声明路由链接 & 占位符；

1. ​
   1. 编辑 编辑

App.vue
<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <!-- 当安装和 配置了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>
    <hr />
    <hr />
    <!-- 只要在项目中 安装和配置了vue-router ，就可以使用router-view 这个组件了 -->
    <!-- 它的作用很单纯 ： 占位符 -->
    <router-view></router-view>
  </div>
</template>

index.js
// 1.导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'


// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
// 2.调用 Vue.use() 西数，把 VueRouter 安装为 Vue 的插件
Vue .use(VueRouter)
// 3.创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用：定义"hash 地址" 与 "组件"之间的对应关系
  routes:[
    // 路由规则
    {path:'/home',component:Home},
    {path:'/movie',component:Movie},
    {path:'/about',component:About}
  ]
})


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