在vue中怎么动态变换router-link中to的值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue中怎么动态变换router-link中to的值相关的知识,希望对你有一定的参考价值。

比如有这么个router需要跳转
const router = new VueRouter(
  routes: [
    
      path: \'/user/:userId\',
      name: \'user\',
      component: User
    
  ]
)


你的router-link可以这么写

<router-link :to=" name: \'user\', params:  userId: 123 ">User</router-link>


还可以用编程在代码里写,效果也一样:

router.push( name: \'user\', params:  userId: 123 )


具体的推荐你看下vue router的官网,里面有详细的说明和例子

参考技术A

在用vue-cli脚手架生成项目之后,在app.vue和main.js里面简单修改一下。

比如有这么个router需要跳转:

1、const router = new VueRouter

routes::path: '/user/:userId',

name: 'user',

component: User;

2、你的router-link可以这么写:

<router-link :to=" name: 'user', params:  userId: 123 ">User</router-link>;

3、还可以用编程在代码里写,效果也一样: 

router.push:name: 'user', params:  userId: 123 ;

vue中部分问题总结

一 vue-router部分

***在路由之间传递params参数

path: ‘/detail/:id‘ 动态路径参数

<li> <router-link to="/word/router1/123">路由1</router-link> </li>

 

<router-link :to="{path: ‘/detail/‘ + this.$route.params.id}" >此团详情</router-link>

 

***在路由跳转地方传递query参数

<router-link v-bind:to="{path:‘/word/router2‘,query:{id:123}}">路由2

</router-link>

 

***路由跳转三种方式

// 用命名路由的方式:

<router-link :to="{name:‘detail‘,params:{id:this.$route.params.id }}" >路由</router-link>

// 用router.push()的方式

router.push({name:‘detail‘, params:{ id: this.$route.params.id}})

//用replace实现页面的跳转

this.$router.replace({path:‘/word/router2‘,query:{id:123}});

***路由前进后退  this.$router.go(1);

***路由重定向  redirect:‘/word/router3‘

 

***定义路由的时可配置 meta  

const routes = [{path:‘/activity‘, meta: {isNeedAuth: false, title: ‘活动‘}},];

 

***组件的异步加载(按需加载组件)   vue-router懒加载

当页面很多,组件很多的时候,会发现页面在首次加载的时候异常的慢,这个是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了,这个时候就需要对页面优化了,就需要异步组件了。如何去写异步组件呢,只需要在你的路由index,js里加上require就可以了

方式一:{   path: ‘/home‘,

           name: ‘Home‘,

           component: function(resolve){

             require([‘url‘], resolve)//懒加载

 

或者:     component: resolve => require([URL], resolve),//懒加载

注意:     component: require(‘url‘)  //这是直接加载!

      }

}

 

方式二:在项目router/index.js文件中将

import good from ‘url‘ 改为:

Const good=(resolve)=>{ import(‘url‘).then((module)=>{ resolve(module) })}//懒加载

 

方式三:在项目router/index.js 文件中将

import good from ‘url‘ 改为:

Const good =require.ensure([],()=>r(require(url)),good) //懒加载

 

之后执行npm run build,可以看出app.xxx.js被分成了一个个小的js文件,根据按需加载,这样就大大缩短了项目的加载时间,更加高效。

 

***vue+axios实现路由登录拦截  (暂时可不看)

参考https://www.cnblogs.com/guoxianglei/p/7084506.html

首先,在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录

const routes = [

    {

        path: ‘/repository‘,

        name: ‘repository‘,

        meta: {

            requireAuth: true,  // 添加该字段,表示进入这个路由是需要登录的

        },

        component: Repository

    },

];

然后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断

router.beforeEach((to, from, next) => {

   。。。

})

最后, axios 拦截器

// http request 拦截器

axios.interceptors.request.use(。。。)

// http response 拦截器

axios.interceptors.response.use(。。。)

 

二 vue组件间通信

1    一个子组件使用$emit(‘eventName‘, param);发送事件, 在父组件通过@eventName="listenEvent(父组件事件名字)"

// 父组件

export default {

    methos: {

        listenEvent (data) {

            // data 即为子组件传递过来的参数

        }

    }

}

以上是关于在vue中怎么动态变换router-link中to的值的主要内容,如果未能解决你的问题,请参考以下文章

Vue router 中 router-link 的 to 怎么绑定对象数组中的属性

vue-router 动态导航 router-link :to属性

Vue 组件:动态使用 router-link 或 href 属性

vue中部分问题总结

vue路由怎么传参router-link传参

vue 路由跳转