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,但是跳转是错误的。’
9 个月之前 回复

你可以试试把这个放最后

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue-router 动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用『动态路径参数』(dynamic segment)来达到这个效果: 1.我们可以在src——routers——index.js文件中 export default new Router({...
vue-router入门(1)—— 基本路由,动态匹配路由,嵌套路由
  本系列的第一章,按照惯例,介绍一下vue-router的设计初衷,我第一次接触到vue-router是通过vue-cli的全家桶,vue-router的设计之初是为了适应单页面应用开发,但事实上,你通过新标签页的方式去访问某个路由,和你通过当前页“跳转”到该路由,路由中所包含的信息都不会丢失,当然新标签页打开和当前页打开在某些情况下也是有区别的。(比如你打开../user/123,在通过当前页...
动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全部映射到同个组件,那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果 动态路径参数,以冒号开头 看个小示例 const router= new Router({ routes:[ { path:'/user/:tip?/:userId?', name:'User', com...
Vue.js路由组件vue-router的使用方法
使用 Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可。 一 普通方式基本例子:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <body>
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-router 设置默认路由
vue-router 设置默认路由
Vue-router 官方文档笔记
vue-router个人理解:Vue中的路由相当于pc里面的锚点超链接,如果点击了页面转向哪,也有点像ajax。安装npm install vue-router 开始用Vue.js + vue-router创建单页应用,是非常简单的。使用Vue.js时,我们就已经把组件组合成一个应用了,当你要把vue-router加进来,只需要配置组件和路由映射,然后告诉vue-router在哪里渲染他们。
Vue-Router(二) 动态路由
Vue-Router(二) 动态路由我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件(vue-router) 比如说一个商城的商品详情页面,详情页面是同一个页面,但是可以根据不同的商品id去展示每一个商品的详情,这时候就用到我们的动态路由 我们先看一下官网中动态路由的介绍: 模式 匹配路径 $route.params /user/:username /user/eva
vue-router中定义动态路由、嵌套路由,并动态获取参数
路由的定义,主要有以下几步: 如果是模块化机制,需要调用 Vue.use(VueRouter) 定义路由组件,如: const Foo = { template: '&amp;lt;div&amp;gt;foo&amp;lt;/div&amp;gt;' }; 定义路由(数组): const routes = [ { path: '/foo', component: Foo }...
vue-router 之动态路由
第一次写博客,先稍稍激动一下下~~~好的,激动结束,开启挖坑之路。 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})然后,我就这样写了: this.$router.push({path:'manage', query:
vue-router动态路由详解
平时做项目时遇到的点击列表页,显示详情页面,此时就需要我们传递列表唯一的标识,然后显示对应的内容。 通常做法是以“参数=值”的形式传递参数,而动态路由将参数融入到路由的路径定义之内成为路径的一部分。 在参数名称之前加“:”,然后将参数写在路由的path内。 下面是给详情页detail传递唯一标识id,从而调取详细的内容。 routes: [ { path: '/',
【vue】动态路由vue-router 动态加载
有时系统需要根据用户的权限来动态加载路由~vue-router有提供给我们一个 addRoutes() 方法,但这个方法只有2.2.0以上版本支持。下面我们看下具体写法: var router = { path: '', name: '', component: resolve =&amp;gt; require.ensure([], (require) =&amp;gt; { ...
vue vue-router 路由配置问题, 重复路由
今天被这个问题坑了两个小时, 还是自己排错能力不够啊!! router 中写有这么两个配置, /resume/new 这个是新加的, 怪了, 咋改组件内容页面上都不变, 重启项目, 更新浏览器都没解决, 最终和同事一起 review 的时候仔细看了下这块, 一下就发现问题了, /resume/new 也会跳转到 /resume/:id 去, 修改 add.vue 页面当然不会变了; 之前也...
vue-router如何进行路由的动态添加
安装 npm install vue-router –save 使用 需要在进行页面切换的地方添加* *进行页面的切换。 1.页面路由跳转 //页面中使用下面语句代替a标签实现跳转,在写完标签后还需要在router中写下以下语句 &amp;amp;lt;router-link to=&amp;quot;/foo&amp;quot;&amp;amp;gt;Go to Foo&amp;amp;lt;/router-link&amp;amp;g
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面
vue:路由未匹配成功,跳转至其他页面(应用于:404页面,功能未开放页面)
1.所有路由匹配 路由的匹配规则是按照书写的顺序执行的,第一条匹配成功则不去匹配下一条,利用这一特性,可以在所有匹配路由的下面拦截匹配所有路由: Vue.use(Router); const router = new Router({ routes: [ { path: '/', name: 'home', redirect: '/home',...
vue router动态路由下让每个子路由都是独立组件的解决方案
http://www.jb51.net/article/138836.htmvue router动态路由下让每个子路由都是独立组件的解决方案转载  发布时间:2018年04月24日 11:32:49   作者:asseek   我要评论 这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下 vue-router 之...
vue--router 动态路由传值(访问页面具体信息逻辑参考)
上图是2种路由传值方法对应的路由配置 上图是2种路由传值对应的数据接收方法
vue router学习——动态路由和嵌套路由
vue router学习——动态路由和嵌套路由 本文主要参考: https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行。如果还么有搭建可以参考文章: http://blog.csdn.net/wild46cat/article/details/7636022
解决vue路由跳转未匹配路径时出现空白页的问题
在进行vue项目开发时,常用vue-router进行路由的导航,这种方式可以很好的进行路由和组件的匹配,但是当用户手动更改为未进行匹配的url时,系统找不到响应的组件进行页面渲染,就会出现空白页面。这种用户体验并不好,下面总结解决该问题的方法。 1.导航守卫 可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ...
vue权限控制路由(vue-router 动态添加路由)
    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。     思路如下:     一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配。 三、通过匹配,把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次...
Vue路由的正则匹配
正则用法 在JavaScript中正则表达式用法为: /正则表达式特殊字符/修饰符(可选) 特殊字符 这里列一下正则的特殊字符及其用法,加深理解和映象。* \ 将字符变为特殊或非特殊字符。如 n 变为换行符 \n,特殊符号 ( 变为字符 \(。* ^ 匹配字符串起始位置。* $ 匹配字符串结束位置。* * 匹配前面的子表达式零到多次。* + 匹配前面的子表达式一到多次。* ...
关于webpack打包文件中有vue-router所引发的问题
问题一:.webpack打包后页面无法显示解决方案:将路由配置中的mode参数改为默认值“hash”,才可以解决该问题。因为当mode值为history时,需要后端的支持。问题二:运行webpack-dev-server后,对于动态路由,当从其他页面转到动态路由页面时,可以正常显示。而在地址栏输入动态路由的地址时,页面不能正常加载解决方案:将路由配置中的mode参数改为默认值“hash”,可以解决...
自定义路由匹配和生成
前言 前两篇文章主要总结了CMS系统两个技术点在ASP.NET Core中的应用: 《ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存》 《ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图》 而本篇文章,继续介绍另一个技术点:自定义路由匹配和生成。 背景 在MVC5时代,默认的路由可能就是简单的
vue-router 动态添加 路由
动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单  1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。            使用方法  this.$router.options.routes[0].children.push({//插入路由
vue-router之nuxt动态路由设置的方法
方法一:router-link&amp;lt;div class=&quot;slide-item&quot; v-for=&quot;user in shareData.users&quot;&amp;gt; &amp;lt;nuxt-link :to=&quot;'/community/member/'+ user.id&quot;&amp;gt; &amp;lt;img src=&quot;../../static/head.png&quot; alt=&quot;&quot;&a
vue-router 二级动态路由传递数据
vue-router 二级动态路由传递数据 在做大创项目的时候,遇到这样一个需求。 根页面有个列表,点其中一条数据就会进入详情界面localhost/list/1。 点more按钮就会进入更多列表界面localhost/list。 由于有n个不同类型的列表,要做到组件复用,又不想创建n个vue文件。 项目也没必要用到Vuex 所以我采用了二级动态路由的方式。 /:name/:id ...
vue-router之addRoutes(动态路由/权限路由)使用分析
// 1 设置默认路由 // 2 由登录获取权限路由(动态路由) // 要存储routes数据 -- 防止刷新时数据丢失--刷新时要重新动态渲染路由 var routes sessionStorage.setItem('routes', JSON.stringify(routes)) // 3 调用方法router.addRoutes(routes)routes要符合路由规则 routes....
vue-router同一路由地址同页面切换无效解决
最近使用vue,同一个展示界面,只是根据不同的参数去在一个页面显示不同的信息。 试了第一次能触发进去,再点击不同参数相同路由就没反应。后来上网搜了下发现这位大神解决了这个问题。 沾过来只是方便遇到这个问题的人能及时解决这种问题。 http://blog.csdn.net/fungleo/article/details/54140095 vue-router 多个
Vue-router 路由详解 多级路由
今天我来分享一下vue路由方面的心得体会。 文章源码位置https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base 使用的脚手架为Vue3.0,IDE为VSCode 首先引入vue路由 cnpm install vue-router --save-dev 然后我们在src目录下建立文件夹router,并...
vue-router菜鸟进阶!(动态路由匹配VS编程式导航)
开篇废话:每天早上都要被自己迷倒~嘻嘻。最近状态超级好编程的状态也好了很多很多~ 前面我们已经看了vue.js基础,又看了webpack的知识还有简单的vue-router小实例。其实已经可以自己勉强写一些简单页面了。但是我偏不hhhhhh,虽然说实践出真知,但是我这种学院派还是偏爱看这官方文档跟着上面的实例走。野路子虽好,可不要走偏噢 ~ (;`O´)o动态路由匹配我们经常需要把某种模式匹配到
vue匹配不到路由跳转登录页或其他页面
为了更好的用户体验,需要在用户访问某个路由的时候,如果匹配不上就跳转到另外一个页面。也就是通常所见的404页面。 可以在router.beforeEach这个全局路由导航函数用to.matched.length判断有没有这个路由,0就是没有,然后跳转到登录页面或者404页面 或者,也可以在路由数组里面用*来匹配,这个*的元素要放在路由数组最后面,否则无效。 ...
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-router动态路由实现前端权限管理
年初了,抱着试试水的心态出去面试了两家公司;其中一家公司面试的时候多次问到了vue-router的动态路由实现权限管理的问题;回来后我就仔细研究了一下 router.addRoutes 动态路由是基于vue-router 新增的router.addRoutes方法来实现的;也就是为了达到当用户登录之后通过判断用的权限来觉得前端哪些页面能展示,哪些不能展示; 第一步 创建vue-router ro...
Vue使用动态组件或者router时,当多个视图使用/指向同一个组件时,如何能够生成多个新实例? 阿星小栈...
component 内的 activate , data , ready , 一类的东西只有在第一次初始化的时候才会被运行 如果router检测到你切换的url是用的同一个组件的时候 他是不会去把同一个component初始化一次的 比如说 /file/:fileId { component:file } 当你切换 /file/123 到 /file/234 你会发现component是不...
Vue的路由动态重定向和导航守卫
根据vue官方文档,对于重定向有详细的示例,但是关于使用方法动态重定向的描述却不多,重定向部分的描述如下: 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命
vue-router异步路由
通过我们引入组件都是直接在页面(route.js)最开始引进来,直接使用,如以下代码 import Login from '../views/login/login.vue' export default [ { path: '/login', // component: Login, name: 'login' }, ...
vue饿了么(一)--vue-router路由 & mock后台数据
1.vue-router:点击导航按钮显示相应页面 1.router/index.vue import Vue from 'vue' import Router from 'vue-router' import header from '@/components/header/header' import ratings from '@/components/ratings/ratings'...
vue-router 路由缓存、路由传参
一、缓存路由组件对象 1、理解 1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的 2) 如果可以缓存路由组件对象, 可以提高用户体验 2、代码实现         &amp;lt;keep-alive&amp;gt;                 &amp;lt;router-view&amp;gt;&amp;lt;/router-view&amp;gt;         &amp;lt;/keep-alive&amp;gt...
vue-router的模糊匹配和精确匹配
场景:最近在做的这个项目有一个场景是个人中心页面,有几个嵌套的二级路由,其中有一个订单的子路由下面还嵌套着几个三级路由。这里二级路由是通过点击router-link进行点击跳转,三级路由是通过二级路由中的查看详情等按钮进入的。问题就在这里当跳转到三级路由的时候对应的二级路由的router-llink如何保持激活样式。 router.js文件中的三极路由的path属性中要写入二级路由的path属性...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java中路由密码学习 web服务器路由映射教程