vue关于router路由的详细使用

最新推荐文章于 2022-07-31 10:02:10 发布

快乐的逗号

最新推荐文章于 2022-07-31 10:02:10 发布

阅读量151

点赞数

分类专栏： web前端文章标签： vue router vue-router web前端 javascript

本文链接：https://blog.csdn.net/wsaku/article/details/101373204

版权

web前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

欢迎来到QQ技术交流群：126095418

1、 vue-router的基本应用

export default new Router({
    routers: [
        {
            name: 'home',
            path: '/',
            component: Home
        },
        {
            name: 'info',
            path: '/info/:id',
            component: Info
        }
    ]
})

2、 router的各种用法介绍

2.1、在页面结构上的用法

<router-view :to="{path: '/'}"></router-view>
<router-view :to="{path: '/info', params: {id: 1}}"></router-view>

<router-view :to="{name: 'home'}"></router-view>
<router-view :to="{name: 'info', params: {id: 1}}"></router-view>

2.2、在js中的用法

this.$router.path('/');
this.$router.path({path: '/'});

this.$router.path('/info/1');
this.$router.path({path: '/info/1'});

this.$router.push({name: 'home'});
this.$router.push({name: 'home', params: {id:1}});

2.3、带有参数的路由跳转

this.$router.push('/?name=张三&sex=男&age=18');
this.$router.push({path: '/', query: {name: '张三', sex: '男', age: '18'}});
this.$router.push({name: 'home', query: {name: '张三', sex: '男', age: '18'}});

3、 router应用在场景中的案例

未完待续....