Vue3.0 - 安装路由 vue-router

Vue3.0 项目常用依赖配置——安装路由

1. 安装依赖
   npm install vue-router@next --save

2. src 文件夹下创建 router 文件夹，router 文件夹下创建 index.js 文件

3. 配置 router.js 文件

   import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
   
   // 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）
   import HelloWorld from "../components/HelloWorld.vue";
   
   // 2. 定义路由配置
   const routes = [
     { path: "/",redirect: '/HelloWorld' },
     { path: "/HelloWorld",name:"HelloWorld", component: HelloWorld },
   ];
   
   // 3. 创建路由实例
   const router = createRouter({
     // 4. 采用hash 模式
     history: createWebHashHistory(),	
     // 采用 history 模式
     // history: createWebHistory(),
     routes, // short for `routes: routes`
   });
   
   export default router
   

4. main.js 中引用

   import { createApp } from 'vue'
   import App from './App.vue'
   import './index.css'
   
   const app = createApp(App)
   
   // 引入路由对象实例
   import router from './router/index.js'
   app.use(router)
   
   app.mount('#app')
   

5. 组件中使用

   <template>
     <div>hello</div>
   </template>
   
   <script>
   // 引入vue-router
   import { useRouter,useRoute } from 'vue-router';
   export default {
     setup() {
       const route = useRoute();
       const router = userRouter();
       // 接收参数
       console.log(route);
       // 路由跳转
       router.push("/");
     },
   };
   </script>