Vue路由编程式导航

最新推荐文章于 2024-08-08 14:30:51 发布

_曹家三少

最新推荐文章于 2024-08-08 14:30:51 发布

阅读量149

点赞数 1

分类专栏： Vue 文章标签： vue java

本文链接：https://blog.csdn.net/wengeaiyuanyuan/article/details/106861817

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

路由的编程式导航

路由的编程式导航

编程式传参：

name要与params对应
path要与query对应
取值：this. $r o u t e . q u e r y . i d 和 t h i s .$ route.params.id

参考：https://www.cnblogs.com/mtxg/p/11275896.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由的编程式导航</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <!-- router-link控制组件的切换。router-link默认会被渲染成a标签 -->
        <!-- 如果不想被渲染成a标签，可以使用tag属性，指定router-link被渲染成哪种标签 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <button @click="toLogin">跳转到登录</button>
        <router-view></router-view>
    </div>
</body>
<script>
    var login = {
        template: "<h2>登录组件---{{this.$route.params.name}}</h2>",
        create() {
            console.log(this.$route);
        }
    }
    var register = {
        template: "<h2>注册组件</h2>"
    }
    let obj = new VueRouter({
        routes: [
            { path: '/login', component: login, name: 'login' },
            { path: '/register', component: register }
        ]
    })
    new Vue({
        el: "#app",
        data: {
        },
        methods: {
            toLogin() {
                // 编程式导航：通过代码去操作路由
                // this.$router.push('/login')
                // 编程式路由如何传递参数
                this.$router.push({
                    name: "login",
                    params: {
                        id: 123,
                        name: "张三"
                    }
                })
            }
        },
        router: obj,
        //监听器
        watch: {
            '$route.fullpath': function (newVal, oldVal) {
                // 监听路由去执行对应的逻辑
                // 应用场景:监听路由的url是否为登录url.如果不是,校验用户是否登录,未登录的情况下跳转到登录页
                console.log('用户路由跳转，url为：', newVal)
            }
        }
    })
</script>
</html>

_曹家三少

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由编程式导航

文章目录路由的编程式导航路由的编程式导航编程式传参：name要与params对应path要与query对应取值：this.route.query.id和this.route.query.id和this.route.query.id和this.route.params.id参考：https://www.cnblogs.com/mtxg/p/11275896.html<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录