vue-router重定向redirect和别名alias的用法区分

vue-router是vue框架的重要且常用的插件之一,用于单页面应用的路径打包管理。项目中常会用到redirect和alias以做“页面假动作”跳转。

重定向redirect

顾名思义,这个属性用于重定向页面跳转路径。简单说就是设置了一个路由,它有自己的路径,但重定向跳转至另一个路由。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld 
    },
    {
      path:'/gohome',
      redirect:'/'
    }
  ]
})
<router-link to="/">Home</router-link>|
<router-link to="/gohome">goHome</router-link>

如例子,“/gohome”的路由结果跳转至“/”根目录路由,最终结果就是两个路由显示的页面内容完全一致。注意:包括浏览器地址栏的路由原路径也随之改变显示为重定向的路径!

别名alias

其实就是为某个路由增加一个“花名”——新路径,使得不管应用到哪条路径最终都显示同一个路由的页面内容。举例:

export default new Router({
  routes: [
    {
      path:'/hi1',
      component:hi1,
      alias:'/Jsxj'
    }
  ]
})
<router-link to="/hi1">Hi1</router-link>|
<router-link to="/Jsxj">Jsxj</router-link>

如上,指向别名alias路径的’router-link’会跳转至path路径的路由页面,最终两个路径都会显示相同的页面内容。但区别于重定向的一点是,浏览器地址栏会保留alias的路径不会随之变动! 这可能是客户往往更想看到的东西。

另外,重定向带参数的目标路由时,该路由的路径中参数名应与目标路由路径参数名一致,才可以向目标路由传递对应参数值。

### Vue-Router 配置及使用教程 #### 一、安装 Vue-Router 为了在项目中使用 `Vue Router`,需要先通过 npm 或 yarn 进行安装。对于新创建的 Vue CLI 项目,默认情况下会自动集成此插件。 ```bash npm install vue-router@next --save ``` 或者使用 Yarn: ```bash yarn add vue-router@next ``` 完成安装之后,在项目的入口文件(通常是 main.js)引入并初始化路由器实例[^1]。 #### 二、基础配置 定义路由表时,需指定路径(path)与对应的组件(component),以及可选参数如重定向(redirect), 别名(alias)等属性。下面是一个简单的例子来展示如何设置基本路由映射关系: ```javascript import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router; ``` 这段代码展示了如何创建一个名为 home 的路由,并将其指向 `HomeView` 组件。同时指定了使用的 HTML5 历史模式作为默认导航方式。 #### 三、高级特性 ##### 动态匹配 可以利用占位符实现动态 URL 参数传递给目标组件的功能。例如访问 `/user/john` 可以触发特定逻辑处理 john 用户的信息。 ```javascript { path: '/user/:id', // :id 是一个动态部分 name: 'User', component: UserComponent, } ``` 当用户点击链接跳转至该页面时,可以通过 `$route.params.id` 获取到 id 参数值[^2]。 ##### 导航守卫 Vue Router 提供了几种不同类型的钩子函数用于控制页面间的过渡行为,比如全局前置守卫(beforeEach)、离开当前页面之前执行的操作(canActivate)或是进入某个具体视图之前的验证(checkAuth)[^3]。 ```javascript // 全局前置守卫 router.beforeEach((to, from, next) => { console.log('准备前往:', to.fullPath); next(); }); // 单个路由独享守卫 { path: '/admin', beforeEnter(to, from, next){ if (/* 权限校验 */) { next() } else { next({name:'login'}) } } } // 组件内的守卫 export default { mounted(){ this.$once('hook:beforeRouteLeave',(to,from,next)=>{ const answer = window.confirm('确认要离开吗?') if(answer) next() else next(false) }) } }; ``` 这些机制可以帮助开发者更好地管理保护应用程序的不同区域免受未授权用户的侵扰。 #### 四、编程式导航 除了常规声明式的 `<router-link>` 外,还可以借助 JavaScript 实现更灵活多变的页面切换效果。常用的方法有 `$router.push()` `$router.replace()` ,分别对应于新增一条新的浏览记录或将现有条目替换为另一位置;另外还有 `$router.go(n)` 支持前进后退操作[^4]。 ```javascript this.$router.push('/about'); // 添加一个新的历史项 this.$router.replace('/contact-us'); // 替换掉当前的历史项而不增加新纪录 this.$router.back(); // 返回上一页 this.$router.forward(); // 前进下一页 ``` 以上就是关于 Vue Router 的一些核心知识点介绍,希望对理解其工作原理有所帮助。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值