实例入手vue-router重定向
生活随笔
收集整理的這篇文章主要介紹了
实例入手vue-router重定向
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
當一進來某一個APP,想讓其顯示某個頁面,所以需要在index.vue使用重定向使其重定向到初始頁面。
效果
前文
從實例入手學習Vue-router的使用-實現音樂導航菜單切換
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84504573
知識儲備
重定向也是通過 routes 配置來完成,下面例子是從 /a 重定向到 /b:
const router = new VueRouter({routes: [{ path: '/a', redirect: '/b' }] })重定向的目標也可以是一個命名的路由:
const router = new VueRouter({routes: [{ path: '/a', redirect: { name: 'foo' }}] })甚至是一個方法,動態返回重定向目標:
const router = new VueRouter({routes: [{ path: '/a', redirect: to => {// 方法接收 目標路由 作為參數// return 重定向的 字符串路徑/路徑對象}}] })實例
在router下的index.js中
import Vue from 'vue' import Router from 'vue-router' import Index from '@/pages/index' import Home from "@/pages/home" import Artists from "@/pages/artists" import ListCate from "@/pages/listcate" import Ucenter from "@/pages/ucenter" import Search from "@/pages/search" Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Index',redirect:"/home",component: Index,children:[{path: 'home',component: Home},{path:"artists",component:Artists},{path:"listcate",component:ListCate},{path:"ucenter",component:Ucenter},{path:"search",component:Search}]}] })?
總結
以上是生活随笔為你收集整理的实例入手vue-router重定向的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: BJUI实现点击按钮弹窗,提交到后台ac
- 下一篇: API测试工具Postman的下载安装与