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

Posted 2023-04-19

比如有这么个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 即为子组件传递过来的参数

        }

    }

}