Vue学习笔记之命名路由

有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事:

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

完整的例子请移步这里

### Vue3 路由学习教程与笔记 Vue Router 是 Vue.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' }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值