Vue路由的使用

首先在控制台下载路由的包，新版路由4.x只支持Vue3.x

文件结构

首先在App.vue中定义好路由的内容显示在哪里，

用<rouer-view/>标签

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
   <router-view/>
  </div>
</template>

定义一个文件夹放一个路由控制的一系列的组件，然后同级房间index.js文件管理所有

这里创建一个IndexPage.vue 和 LoginPage.vue

然后同级创建一个index.js管理这两个

//让Vue使用他
import Vue from "vue";
import Router from "vue-router";
import LoginPage from "@/views/passport/LoginPage";
import IndexPage from "@/views/passport/IndexPage";

Vue.use(Router)
//定义路由表
//router的变量命名是固定的
const router = new Router({
    mode :'history',//去除路径地址中的#标记
    routes:[
        //定义路由表 集合中的每个对象 描述一个路由策略
        {
            path:'/login',//访问路径
            component:LoginPage//组件一定是当前main.js中可见 import
        },
        {
            path:'/index',
            component:IndexPage
        }
    ]
})
export default router

对外开放变量名为router 在main.js中引入的时候必须一致。

import Vue from 'vue'
import App from './App.vue'


//引入路由
import router from './views/passport/index'

Vue.config.productionTip = false

new Vue({
  //交给vue实例
  router,
  render: h => h(App),
}).$mount('#app')