路由

路由（）

1. npm install vue-router安装

2. 新建router文件夹 新建index.js创建路由

路由配置文件：代码如

import { createRouter, createWebHashHistory } from "vue-router";
​
import Bar from './components/HelloWorld.vue'
import Foo from './components/HelloWorld.vue'
import User from './components/HelloWorld.vue'
​
​
//routes 路由信息对象数组
//route 每一组路由信息对象
//router 创建的路由管理对象
​
//创建路由管理对象
const router = createRouter({
  history: createWebHistory(),
  //创建路由信息对象数组
  routes:[
    {path:'/foo',component:Foo},
    {path:'/user',component:User},
    {path:'/var',component:Bar},]
})
​
​
// 将路由管理器对象对外抛出
export default router

 

3. 引入路由 在main.js

   import { createApp } from 'vue'
   import App from './App.vue'
   import './index.css'
   import router from './router/index.js'
   ​
   // 将配置好的路由管理器对象与当前vue项目相关联
   createApp(App).use(router).mount('#app')
   ​

4. 路由导航 在APP.vue

    

<template>
  <div class="nav">
    <!--路由导航-->
  <router-link to="/foo">foo</router-link>
  <router-link  to="/user">user</router-link>
  <router-link to="/bar">bar</router-link>
  </div>
  <!--路由出口-->
  <router-view></router-view>
</template>
​
<script>
​
​
export default {
  name: 'App',
  components: {
​
  }
}
</script>