Vue-router动态路由匹配到正常路由怎么办 5C

在router.js中定义了这样两个路径/:id、/user,因为动态路由是在根路径下
且先定义的,所以后面的路径不会匹配,访问任何路径会匹配到/:id这个路径下,具体代码如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: () => import('./views/index/Index.vue'),
      children: [
        {
          path: '/',
          redirect: {
            name: 'index'
          }
        },
        {
          path: '/index',
          name: 'index',
          component: () => import('./views/pages/Home.vue')
        },
        {
          path: ':user_name',
          component: () => import('./views/index/Index.vue'),
          children: [
            {
              path: '/',
              name: 'user_info',
              component: ()=>import('./views/pages/UserInfo.vue')
            },
            {
              path: 'article',
              name: 'user_article',
              component: ()=>import('./views/pages/UserArticle.vue')
            }
          ]
        }
      ]
    },
    {
      path: '/user',
      component: () => import('./views/users/User.vue'),
      children: [
        {
          path: '',
          redirect: {
            name: 'profile'
          }
        },
        {
          path: 'profile',
          name: 'profile',
          component: () => import('./components/user/Profile.vue')
        },
        {
          path: 'editor',
          name: 'editor',
          component: () => import('./components/user/Editor.vue')
        }
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('./views/Login.vue')
    },
    {
      path: '/404',
      name: '404',
      component: () => import('./views/404.vue')
    },
    {
      path: 'register',
      name: 'register',
      component: () => import('./views/Register.vue')
    }
  ]
})


// router全局钩子函数
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (to.path === '/login') {
    next()
    NProgress.done();
  } else {
    if (to.meta.requiresAuth && !getToken()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
      NProgress.done();
    } else {
      next()
      NProgress.done()
    }
  }
})

export default router

如上,当访问/username时匹配/:id,但是之后的路由无论访问/user、/login等都是匹配的/:id这个路由。

求教该怎么写路由才能让匹配正确的路由?

0

2个回答

0
qq_27437991
qq_27437991 你可能没明白我的意思,有两个路由/:id和/a, 访问/a这个路由,跳转到了/:id这个路由上虽然路径是/a,但是跳转是错误的。’
11 个月之前 回复

你可以试试把这个放最后

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue-router入门(1)—— 基本路由,动态匹配路由,嵌套路由
  本系列的第一章,按照惯例,介绍一下vue-router的设计初衷,我第一次接触到vue-router是通过vue-cli的全家桶,vue-router的设计之初是为了适应单页面应用开发,但事实上,你通过新标签页的方式去访问某个路由,和你通过当前页“跳转”到该路由,路由中所包含的信息都不会丢失,当然新标签页打开和当前页打开在某些情况下也是有区别的。(比如你打开../user/123,在通过当前页...
Vue路由守卫-404页面(MD.8)
简单讲一下Vue项目前端路由(Vue-Router)的意外处理,即当用户输入了网站不存在的地址,跳转到指定页面,不至于让页面显示一片空白,用户一脸懵逼,然后吐槽一波你的网站! 废话不多说,在你的router配置脚本(.js文件)的最后面加上一行配置项,代码如下: { path: '*', name: 'Error', component: ErrorPage, } p...
动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全部映射到同个组件,那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果 动态路径参数,以冒号开头 看个小示例 const router= new Router({ routes:[ { path:'/user/:tip?/:userId?', name:'User', com...
vue-router -- 动态路由匹配
一、概述 使用场景: 根据商品的id返回指定商品的详情页 匹配规则 模式 匹配路径 $route.params /user/:username /user/Jack {username=’Jack’} /user/:username/post/:post_id /user/Jack/post/123 {username=’Jack’,post_id=’123’} 二
vue:路由未匹配成功,跳转至其他页面(应用于:404页面,功能未开放页面)
1.所有路由匹配 路由的匹配规则是按照书写的顺序执行的,第一条匹配成功则不去匹配下一条,利用这一特性,可以在所有匹配路由的下面拦截匹配所有路由: Vue.use(Router); const router = new Router({ routes: [ { path: '/', name: 'home', redirect: '/home',...
Vue动态匹配路由及用户权限过滤
Vue动态匹配路由 这个研究了大半天了,由于对vue不是很熟悉,所以走了很多弯路,这里记录一下开发步骤,参考链接 https://juejin.im/post/591aa14f570c35006961acac 思路 用户登录,获取token,把token存入cookie 使用router.beforeEach 判断用户是否已经拉取用户信息,如果没有,则拉取用户信息 根据token获取用户可访问的...
vue-router的模糊匹配和精确匹配
场景:最近在做的这个项目有一个场景是个人中心页面,有几个嵌套的二级路由,其中有一个订单的子路由下面还嵌套着几个三级路由。这里二级路由是通过点击router-link进行点击跳转,三级路由是通过二级路由中的查看详情等按钮进入的。问题就在这里当跳转到三级路由的时候对应的二级路由的router-llink如何保持激活样式。 router.js文件中的三极路由的path属性中要写入二级路由的path属性...
vue-router 动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用『动态路径参数』(dynamic segment)来达到这个效果: 1.我们可以在src——routers——index.js文件中 export default new Router({...
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面
vue学习十三(VueRouter起步、动态路由参数匹配、获取、监测变化(测试无效))
文章目录起步动态路由参数匹配动态路由参数获取响应路由参数的变化(测试失败) 起步 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点...
Vue-Router(二) 动态路由
Vue-Router(二) 动态路由我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件(vue-router) 比如说一个商城的商品详情页面,详情页面是同一个页面,但是可以根据不同的商品id去展示每一个商品的详情,这时候就用到我们的动态路由 我们先看一下官网中动态路由的介绍: 模式 匹配路径 $route.params /user/:username /user/eva
Vue-router学习笔记——遇到的坑(一)history模式刷新/设置嵌套路由显示404/cannot find(webpack配置)
前端路由有两种,一种是hash模式,一种是history模式。 这两种模式的url路径都不需要真实存在,只需要为前端跳转做一个显示。 hash模式的url路径会带有#,看起来不太舒服且不好做SEO,但是因为浏览器向服务器请求时会自动忽略#后面的值,所以在浏览器中刷新还是很正常的。 history模式的url路径就像我们平常看到的那样,就是因为看起来很像真的,所以浏览器向服务器请求(也就是刷新)...
vue-router中定义动态路由、嵌套路由,并动态获取参数
路由的定义,主要有以下几步: 如果是模块化机制,需要调用 Vue.use(VueRouter) 定义路由组件,如: const Foo = { template: '<div>foo</div>' }; 定义路由(数组): const routes = [ { path: '/foo', component: Foo }...
vue-router如何进行路由的动态添加
安装 npm install vue-router –save 使用 需要在进行页面切换的地方添加* *进行页面的切换。 1.页面路由跳转 //页面中使用下面语句代替a标签实现跳转,在写完标签后还需要在router中写下以下语句 <router-link to="/foo">Go to Foo</router-link&g
【vue】动态路由vue-router 动态加载
有时系统需要根据用户的权限来动态加载路由~vue-router有提供给我们一个 addRoutes() 方法,但这个方法只有2.2.0以上版本支持。下面我们看下具体写法: var router = { path: '', name: '', component: resolve => require.ensure([], (require) => { ...
解决vue路由跳转未匹配路径时出现空白页的问题
在进行vue项目开发时,常用vue-router进行路由的导航,这种方式可以很好的进行路由和组件的匹配,但是当用户手动更改为未进行匹配的url时,系统找不到响应的组件进行页面渲染,就会出现空白页面。这种用户体验并不好,下面总结解决该问题的方法。 1.导航守卫 可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ...
vue-router动态路由详解
平时做项目时遇到的点击列表页,显示详情页面,此时就需要我们传递列表唯一的标识,然后显示对应的内容。 通常做法是以“参数=值”的形式传递参数,而动态路由将参数融入到路由的路径定义之内成为路径的一部分。 在参数名称之前加“:”,然后将参数写在路由的path内。 下面是给详情页detail传递唯一标识id,从而调取详细的内容。 routes: [ { path: '/',
前端性能优化-番外篇-动态路由和vue-router懒加载
官方资料: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html 路由懒加载和非懒加载的差别: 1、在项目中切换路由,明显可以看到,非懒加载只有在初次切换路由时加载所有的路由js文件,懒加载每次切换路由会加载新的js。(切换相同路由使用缓存不算) 2、打包项目后可见,非懒加载所有路由相关js都打包在0*.js文件中了,路由懒加载...
自定义路由匹配和生成
前言 前两篇文章主要总结了CMS系统两个技术点在ASP.NET Core中的应用: 《ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存》 《ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图》 而本篇文章,继续介绍另一个技术点:自定义路由匹配和生成。 背景 在MVC5时代,默认的路由可能就是简单的
Vue如何设置路由以及如何动态路由和get传值
1.安装 npm install vue-router --save / cnpm install vue-router --save 2.在main.js里边引入并 Vue.use(VueRouter) import App from './App.vue'; //根组件 import VueResource from 'vue-resource'; Vue.use(Vu...
vue权限控制路由(vue-router 动态添加路由)
    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。     思路如下:     一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配。 三、通过匹配,把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次...
vue-router基础(二)动态路由匹配
我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果  const User = { template: '<div>User</div>' } const router = new VueRouter({ ...
vue 嵌套路由的匹配
实现某个场景:一开始显示子级路由页面。然后也能显示其它父级路由的。 下面的路由情况是这样的 HelloWorld 和Second是父级路由,Test是子路由 import HelloWorld from '@/components/HelloWorld' import Test from '@/components/Test' import Second from '@/components...
vue--router 动态路由传值(访问页面具体信息逻辑参考)
上图是2种路由传值方法对应的路由配置 上图是2种路由传值对应的数据接收方法
vue-router动态路由实现前端权限管理
年初了,抱着试试水的心态出去面试了两家公司;其中一家公司面试的时候多次问到了vue-router的动态路由实现权限管理的问题;回来后我就仔细研究了一下 router.addRoutes 动态路由是基于vue-router 新增的router.addRoutes方法来实现的;也就是为了达到当用户登录之后通过判断用的权限来觉得前端哪些页面能展示,哪些不能展示; 第一步 创建vue-router ro...
vue-router 动态添加 路由
动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单  1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。            使用方法  this.$router.options.routes[0].children.push({//插入路由
vue-router 二级动态路由传递数据
vue-router 二级动态路由传递数据 在做大创项目的时候,遇到这样一个需求。 根页面有个列表,点其中一条数据就会进入详情界面localhost/list/1。 点more按钮就会进入更多列表界面localhost/list。 由于有n个不同类型的列表,要做到组件复用,又不想创建n个vue文件。 项目也没必要用到Vuex 所以我采用了二级动态路由的方式。 /:name/:id ...
关于webpack打包文件中有vue-router所引发的问题
问题一:.webpack打包后页面无法显示解决方案:将路由配置中的mode参数改为默认值“hash”,才可以解决该问题。因为当mode值为history时,需要后端的支持。问题二:运行webpack-dev-server后,对于动态路由,当从其他页面转到动态路由页面时,可以正常显示。而在地址栏输入动态路由的地址时,页面不能正常加载解决方案:将路由配置中的mode参数改为默认值“hash”,可以解决...
vue-router之addRoutes(动态路由/权限路由)使用分析
// 1 设置默认路由 // 2 由登录获取权限路由(动态路由) // 要存储routes数据 -- 防止刷新时数据丢失--刷新时要重新动态渲染路由 var routes sessionStorage.setItem('routes', JSON.stringify(routes)) // 3 调用方法router.addRoutes(routes)routes要符合路由规则 routes....
Vue路由正则表达式的路由匹配
可以使用如下正则匹配路由,只有是数字的才会进入这个路由Vue.js官网路由匹配 { path: 'test/:id(\\d+)', component: () => import ('@/src/Test.vue'), name: 'Test', meta: { title: 'test/' } } ...
vue-router 路由缓存、路由传参
一、缓存路由组件对象 1、理解 1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的 2) 如果可以缓存路由组件对象, 可以提高用户体验 2、代码实现         <keep-alive>                 <router-view></router-view>         </keep-alive&gt...
vue-router详尽:编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航   在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航。。。 通俗理解编程式导航:通过操作$router实例的JavaScript代码实现路由跳转。点击 <router-link :to="..."> 等同于调用 router.push(...)。$rout...
vue-router菜鸟进阶!(动态路由匹配VS编程式导航)
开篇废话:每天早上都要被自己迷倒~嘻嘻。最近状态超级好编程的状态也好了很多很多~ 前面我们已经看了vue.js基础,又看了webpack的知识还有简单的vue-router小实例。其实已经可以自己勉强写一些简单页面了。但是我偏不hhhhhh,虽然说实践出真知,但是我这种学院派还是偏爱看这官方文档跟着上面的实例走。野路子虽好,可不要走偏噢 ~ (;`O´)o动态路由匹配我们经常需要把某种模式匹配到
vue router学习——动态路由和嵌套路由
vue router学习——动态路由和嵌套路由 本文主要参考: https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行。如果还么有搭建可以参考文章: http://blog.csdn.net/wild46cat/article/details/7636022
解决vue2.0路由跳转未匹配相应路由而出现空白页面的问题
Vue 路由跳转 出现空白页面 redirect
vue-router之nuxt动态路由设置的方法
方法一:router-link<div class="slide-item" v-for="user in shareData.users"> <nuxt-link :to="'/community/member/'+ user.id"> <img src="../../static/head.png" alt=""&a
Vue路由(vue-router)配置实战——动态路由,重定向,工程非根目录
本文通过实战讲解如何在Vue的工程中配置路由,以及父子组件之间如何通信。
vue-router 路由跳转和嵌套二级路由
1路由跳转 <router-link>标签中的to就是跳转的页面 router-link标签相当于a标签 2路由嵌套 在目标路由下添加children可以添加二级路由
vue-router嵌套路由定向问题
存在这样一个路由routes: [ { path: '/home', name: 'home', component: Nav, children: [ { path: 'index', name: 'index', component: Index ...
vue vue-router路由参数可选,可传可不传
由于项目需求会遇到进入某个页面获取模默认信息,但有时需要传递一个id获取对应的信息,为了兼容同一个页面的路由的参数,可传可不传,可以针对路由做以下处理: { path: '/index/:id?', //获取参数:this.$route.params.id name: 'index', component: Index }  ...