VUE学习(七) router的使用

1.通过npm安装router 

npm install vue-router

 在项目目录下执行即可

 2.在vscode中新建router目录和index.js文件

 index.js代码如下

import { createRouter, createWebHistory } from 'vue-router'

//路由数组
const routes = [
    {
        //基本格式
        path: "/",
        name: "Login",
        component: ()=> import('../Login/Login.vue'),
        children: []
    }
]

//路由对象
const router = createRouter({
  //  history: createWebHistory(process.env.BASE_URL),
  history: createWebHistory(),
    routes //上面的路由数组
})

//导出路由对象，在main.js中引用
export default router

3.在main.js引入router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css' 

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.use(VXETable) 

app.mount('#app')

4.在app.vue中加入<router-view></router-view>

<template>
  
  <router-view></router-view>
</template>

5.setup语法糖的写法