Vue-router路由安装
【摘要】 Vue3.0 项目常用依赖配置——安装路由安装依赖npm install vue-router@next --savesrc 文件夹下创建 router 文件夹,router 文件夹下创建 index.js 文件配置 router.js 文件import {createRouter, createWebHashHistory, createWebHistory} from "vue-rout...
Vue3.0 项目常用依赖配置——安装路由
-
安装依赖
npm install vue-router@next --save
-
src 文件夹下创建 router 文件夹,router 文件夹下创建 index.js 文件
-
配置 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
-
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')
-
组件中使用
<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>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)