vue-route项目创建r笔记

1、构建vue项目，vue create name（name为项目名称）
2、安装vue-router插件，npm i vue-router

3、在src目录下建立views文件夹，里面建立类似login.vue文件

<template>
  <div>Home</div>
</template>

4、建立router
在src下创建router文件夹，在文件夹下新建index.js文件，里面随意如下内容:

import VueRouter from "vue-router"; //引入vue-router
import Vue from "vue"; //引入vue
import Home from "../views/Home.vue"; //引入view下不同的组件
import Login from "../views/Login.vue";
import HelloWorld from "../components/HelloWorld.vue";

Vue.use(VueRouter); //用Vue下的VueRouter的插件

// console.log(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: "/", //路径
      component: Home, //显示对应引入的vue单文件组件
    },
    {
      path: "/",
      redirect: "/login",//路由重定向
      component: Login,
    },
    {
      path: "/login",
      component: Login,
    },
    {
      path: "/vue",
      component: HelloWorld,
    },
  ],
});

export default router; //导出vue路由

5、项目入口文件引入路由
src/main.js是项目的主入口文件，在文件中引入router，在new Vue中添加router

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; //新引入

Vue.config.productionTip = false;

new Vue({
  router, //新添加
  render: (h) => h(App),
}).$mount("#app");