vue-cli 路由导航守卫和路由元信息

documenttitle=tometatitle

})

routes：[

{path:'/',

meta:{title:'首页'},//meta选项是路由元信息，用于在每个路由身上添加一份数据

component:()=>import('/pages/Homevue')

}

]

在中后台应用系统开发中，大部分情况下会涉及到用户权限控制，除了后端做权限验证外，前端在用户访问时也需要基于用户权限做相应控制。针对前端使用vue框架的情况，对页面一级的权限控制，常规处理是在页面导航栏通过控制导航显隐控制权限，但在浏览器地址栏输入访问路径依然可以访问，可以用vue-router的动态路由来实现权限控制。

登录成功后通过addRoutes更新路由配置

正常情况下这样就可以实现动态路由控制了，但刷新页面发现会出现404，因为刷新时vue实例重新初始化了，导致动态路由被还原成默认路由，此时需要将权限码存储在本地，在mainjs中根据权限码重新生成动态路由

以上步骤基本可以实现动态添加路由并在刷新页面是维持路由状态，但访问根路径会始终跳转到登录页，无法默认跳转到首页，这个问题目前还未想到好的解决方案。



首页

问答

综合

首页 > 正文

Vuejs动态路由匹配，为什么不能识别路由参数呢

H5W32021-05-05 17:56:01



如上图，想要实现两个菜单选项共用一个页面，通过路由参数来判断功能从而筛选显示不同的内容。

selectMenu:function(key, keyPath){

consolelog(key);

switch(key){

case '1':this$routerpush('/index');break;

case '2-1-1':this$routerpush({path:'/sale/sureList/0',name:'待确认订单'});break;

case '2-1-2':this$routerpush('/logistics/logisticsList/0');break;

case '2-1-3':this$routerpush({path:'/sale/sureList/',name:'订单管理'});break;

default:break;

上面是菜单控制函数，当我选择待确认菜单时，路由成功匹配到路由中的第一项，status =0。但实际上我在surListvue页面获取路由参数失败，报错：[vue-router] missing param for named route "待确认订单": Expected "status" to be defined

导致界面不能正确渲染，还是原来的确认订单界面，如下图所示（有点丑，为了实现效果）。标题的渲染是根据路由参数来判断显示的。



可耐的小伙伴们，求助求助！

///////////////////////////////////////////////////////////////////////////////////

下面是监听路由情况下打印输出的路由及路由参数



回答：

！！$routepus()使用错误

查看$routepush()用法，发现一般有下面的三种用法，而我原来写的那种路径加名字是不合法的。

试着使用第二种和第三种命名法:this$routerpush({name:'待确认订单',params:{status:'0'}})，成功了。：）要么只push路径path，要么push name和参数status确定路由。

(1)字符串

routerpush('home')

(2)// 对象

this$routerpush({path: '/loginurl=' + this$routepath});

(3)// 命名的路由,后面的参数为动态路由的参数

routerpush({ name: 'user', params: { userId: 123 }})

(4)// 带查询参数，变成/backend/orderselected=2

this$routerpush({path: '/backend/order', query: {selected: "2"}});

回答：

首先，selectMenu方法不建议在跳转路由的时候带有中文的name，或者说路由的定义不建议用中文

其次，你想用path:'/sale/sureList/'时，进入订单管理页，但是路由指向的是待确认订单的路由，并且提示status未定义，所以你可以这样定义路由试试

path: '/sale/sureList'

另外，我做过类似的页面，两个路由指向同一个页面，这个时候在进行页面的切换时，并不会重新挂载，所以获取路由名称方式用mounted方法和watch监听方法一起做。

watch: {

'$route': function (route) {

// 监听路由变化

consolelog("router changed");

let routerName = this$routename;

consolelog(routerName);

}

},

mounted(){

let routerName = this$routename;

consolelog(routerName);

///////////////////////////////////////

简单测试url传递参数输出params：

在使用Vue3hooks中使用路由，首先要先安装vue-router，在mainjs中引入，然后创建一个router实例，并在Vue实例中使用，在需要使用的组件中，使用useRouter获取路由实例，然后就可以使用路由的API进行 *** 作，比如跳转页面、获取路由参数等。

注意：路由视图组件router-view标签不要漏了

又比如此处案例

    22 需要传参的地址，例如Goodsvue的地址需要传参数id

        221    首先在路由中开启props：true

        222    在Goodsvue中，接受参数props：[ 'id' ]

        223    然后引入组合式api，使用规则如下所示

设置如下（ 加粗字体为模块化全局状态管理的引用方式 ）

首先引入组合式API，import { useStore } from "vuex";

注意：加粗字体是模块化全局状态管理的使用规则的不同点（数据， 计算属性（需要加上中括号） ，函数的不同）

在store中建议文件夹modules，并在其中新建phonejs模块，编译如下，

注 意点：设置私有命名空间（加粗字体），其他照旧

        411   在src中新建工具包utils，其中建立文件indexjs文件，编译如下函数

            412 在组件中引用

            413 在组件中使用（注意：上述文件只能映射数据，不能映射方法）

            加粗字体是映射函数的使用方式（删减和应用方式）

vue路由传参有两种类型， query ， params ，这篇文章梳理一下。

params 想要实现刷新页面不影响传参，需要在路由里修改路径

冒号+字段 : :id 的格式

以上就是关于vue-cli 路由导航守卫和路由元信息全部的内容，包括:vue-cli 路由导航守卫和路由元信息、前端权限控制-基于vue-router的动态路由实现、vue动态路由引用组件在服务器上不能识别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！