Vue-router笔记:访问根路由重定向至首页,修改默认路由值为history模式

本文是关于Vue-router的笔记,详细介绍了如何在访问根路由时重定向到首页,并将默认路由模式改为history模式。通过在router/index.js中配置redirect属性,在main.js中导入组件并修改VueRouter的mode属性实现这一目标。
### Vue3 路由学习教程与笔记 Vue RouterVue.js 官方的路由管理器,用于实现单页面应用(SPA)中的导航功能。以下是关于 Vue3 路由的学习资料和笔记: #### 1. Vue3 路由的基本安装 在使用 Vue Router 之前,需要先安装其依赖。可以通过以下命令完成安装[^1]: ```bash yarn add vue-router@next ``` 或 ```bash npm install vue-router@next ``` #### 2. 配置 Vue3 路由Vue3 中,路由配置方式与 Vue2 类似,但有一些差异需要注意。以下是一个典型的路由配置示例[^2]: ```javascript // router/index.js import { createRouter, createWebHistory } from 'vue-router'; import DemoHome from "../view/DemoHome.vue"; import DemoFriend from "../view/DemoFriend.vue"; import DemoMy from "../view/DemoMy.vue"; const routes = [ { path: "/home", component: DemoHome }, { path: "/my", component: DemoMy }, { path: "/friend", component: DemoFriend }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 在 `main.js` 文件中引入并挂载路由对象[^3]: ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` #### 3. Vue3 路由守卫 路由守卫是控制页面访问权限的重要工具。Vue3 提供了全局、组件内以及独享守卫的功能[^4]。以下为一个简单的全局守卫示例: ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated) { next('/login'); // 如果未登录,则跳转到登录页 } else { next(); // 否则继续跳转 } }); ``` #### 4. 动态路由与嵌套路由 动态路由和嵌套路由Vue Router 的高级功能之一。以下为一个嵌套路由的示例: ```javascript const routes = [ { path: '/account', component: { render: (e) => e("router-view") }, children: [ { path: 'login', component: Login }, { path: 'signup', component: Signup }, ], }, ]; ``` #### 5. 命名路由重定向 命名路由重定向可以提升路由的灵活性。例如: ```javascript const routes = [ { path: '/', redirect: '/index' }, { path: '/index', name: 'home', component: Home }, ]; ``` 通过命名路由,可以直接使用名称进行导航: ```javascript this.$router.push({ name: 'home' }); ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值