（二）在vue中设置默认的路由以及设置重定向

您所在的位置：网站首页 › vue动态修改路由 › （二）在vue中设置默认的路由以及设置重定向

（二）在vue中设置默认的路由以及设置重定向

2024-02-21 15:59| 来源: 网络整理| 查看: 265

在vue中设置默认的路由，即一进入页面就显示其中一个路由的内容，也就是设定重定向。

如下是设置默认路由的代码，即router文件夹下的index.js的内容：

import Vue from 'vue'; import Router from 'vue-router'; import seller from '@/componentsllerller'; import ratings from '@/components/ratings/ratings'; import goods from '@/components/goods/goods'; Vue.use(Router); const routes = [{ path:'/', //这个表示的是根目录，即一进入的页面 redirect:'goods' //设置页面一进来就显示的页面，即重定向到goods组件，这里写的内容是对应组将的component的值 },{ path:'/goods', component:goods },{ path:'/ratings', component:ratings },{ path:'ller', component:seller }]; export default new Router({ linkActiveClass:'active',//当路由被选中的时候，会为选中的路由增加一个属性linkActiveClass其默认值为'router-link-active' routes //在这里是将好是将上面的那个默认值修改为active，这样就可以在App.vue中调用这个属性 })

上面设置的默认路由是：goods组件，即定义一条路由规则：

{ path:'/', //这个表示的是根目录，即一进入的页面 redirect:'goods' //设置页面一进来就显示的页面，即重定向到goods组件，redirect对应的值是其中一条路由component的值 }

在官网中的详细描述重定向：点击打开链接

在上面的export中有定义属性linkActiveClass的值为'active'，默认为router-link-active，即某条路由被选中的时候自动加上这个样式属性，在App.vue中可以设置这个属性的值，如下面代码：

商品评论商家 import header from './components/header/header.vue'; export default { name: 'App', components:{ 'v-header':header } } #app .tab display:flex width:100% height:40px line-height:40px .tab-item flex:1 text-align:center & > a //router-link会被渲染成标签 display :block //使子元素充满整个父元素 font-size:14px color:rgb(77,85,93) &.active //当某条路由被选中的时候，给其linkActiveClass设置的值active样式 color:rgb(240,20,20)

【本文地址】

（二）在vue中设置默认的路由以及设置重定向

（二）在vue中设置默认的路由以及设置重定向

今日新闻

推荐新闻