编程式导航

vue2
557 词

编程式导航-路由跳转&传参#

基本跳转#

问题：点击按钮跳转如何实现
编程式导航：用 js 代码来进行跳转
两种语法：

  1. path路径跳转（更建议方便）
1
2
3
4
5
this.$router.push('路由路径');
// 完整写法
this.$router.push({
    path: '路由路径',
});
  1. name命名路由跳转（适合path路径长的场景）
1
2
3
this.$router.push({
    name: '路由名',
});
1
2
3
4
5
6
7
const router = new VueRouter({
    routes: [
        // ...
        { name: '路由名', path: '/path/xxx', component: xxx },
        // ...
    ],
});

实例#

按钮绑定点击事件

1
<button v-on:click="goSearch">搜索一下</button>
1
2
3
4
5
6
7
8
9
10
methods: {
    goSearch() {
        // 1.通过路径的方式跳转
        // 1）this.$router.push('路由路径');
        // 2）this.$router.push({path:'路由路径'});
        // this.$router.push('/search');
        // 2.通过命名路由的方式跳转，需要给路由起名
        this.$router.push({ name: 'search' });
    },
},

用第二种方式，命名路由跳转方式需要在路由模块中给路由规则命名

1
2
3
4
5
6
7
8
routes: [
    // 访问到/时重定向到/home
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    // 命名路由
    { name: 'search', path: '/search/:words?', component: Search },
    { path: '*', component: NotFound },
],

路由传参#

问题：点击搜索按钮，跳转需要传参，如何实现
两种传参方式：查询参数&动态路由传参
上面的两种跳转方式，对于这两种传参方式都支持

path 路径跳转传参#

  1. query 传参
1
2
3
4
5
6
7
8
9
this.$router.push('/路径?参数名1=值1&参数名2=值2');
// 完整写法，更适合传参
this.$router.push({
    path: '/路径',
    query: {
        参数名1: '值1',
        参数名2: '值2',
    },
});

例：输入框用v-model指令绑定到inpValue，将其作为参数拼接到路径后

1
2
3
4
5
6
7
8
9
10
11
data() {
    return {
        inpValue: '',
    };
},
methods: {
    goSearch() {
        // this.$router.push('路由路径?参数名=值&...');
        this.$router.push(`/search?key=${this.inpValue}`);
    },
},

目标组件获取参数使用$route.query.参数名获取

  1. 动态路由传参
1
2
3
4
this.$router.push('/路径/参数值');
this.$router.push({
    path: '/路径/参数值',
});

例：

1
2
3
4
5
6
methods: {
    goSearch() {
        // this.$router.push('路由路径/参数值');
        this.$router.push(`/search/${this.inpValue}`);
    },
},

获取参数使用$route.params.words获取

name 命名路由跳转传参#

  1. query 传参
1
2
3
4
5
6
7
this.$router.push({
    name: '路由名',
    query: {
        参数名1: 值1,
        参数名2: 值2,
    },
});

获取参数使用$route.query.参数名获取

  1. 动态路由传参
1
2
3
4
5
6
7
this.$router.push({
    name: '路由名',
    params: {
        参数名1: 值1,
        参数名2: 值2,
    },
});

获取参数使用$route.params.参数名获取