vue2路由创建

1.安装

npm i vue-router@3.5.2 -S

• 此处本人指定了版本（@后面为版本号）

• npm i -S其实就是npm i --save的简写，通过这个命令下载的命令会放在packge.json的dependencies对象中，并打包至生产环境

此处涉及到一些npm指令问题

• npm i下载的包不能通过npm uninstall卸载，必须使用npm unistall i 才能够卸载；

• npm i会帮助检测与当前node最匹配的npm 版本号，并匹配出相应npm包应该升级的版本号；

• npm i 安装的一些包，在当前node版本下是无法使用的，必须使用建议版本才行；

• npm i 安装报错不会生成npm-debug.log文件，而npm install 则会生成；

2.新建文件并初始化文件

在src源代码目录下新建router/index.js 路由模块，项目结构如下

• 文件图标是vscode的插件导致不用细究
• router/index.js代码如下

//导入vue和vueRouter包
import Vue from "vue";
import VueRouter from "vue-router";

//安装为vue的插件
Vue.use(VueRouter);

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

//创建路由的实列对象
const router = new VueRouter({
  //routes是一个数组，
  //定义 "hash地址"与组件之间的关系
  routes: [
  //path是hash值（app.vue（在下面）标签#那一部分） component是对应的组件
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/movie",
      component: Movie,
    },
    {
      path: "/about",
      component: About,
    },
  ],
});

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

3.在项目中引入路由（在main.js中引入）

import Vue from "vue";
import App from "./App.vue";

// 导入 bootstrap 样式
import "bootstrap/dist/css/bootstrap.min.css";
// 全局样式
import "@/assets/global.css";


//重点
//导入路由模块
//如果给的是一个文件夹，则自动导入文件夹下index.js
import router from "@/router";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  //挂载路由对象
  router,
}).$mount("#app");

• app.vue文件代码如下

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    
    
    <!-- 安装vue-router后，用router-link代替普通的a标签，此标签不用写 # -->
    <!-- <router-link to="/home">首页</router-link> -->
    <!-- <router-link to="/movie">电影</router-link> -->
    <!-- <router-link to="/about">关于</router-link> -->
   
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
    <!-- 安装和配置vue-router后可以使用 -->
    <!-- 相当于占位符 -->
    <router-view></router-view>
    <hr />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>