vue-router编程式导航

最新推荐文章于 2024-08-27 20:39:32 发布

一个想走出去的码农

最新推荐文章于 2024-08-27 20:39:32 发布

阅读量139

点赞数

分类专栏： vue vue路由文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51811318/article/details/116541847

版权

vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

vue路由

7 篇文章 0 订阅

订阅专栏

vue-router编程式导航

1. 理解

在这里插入图片描述

2.例子利用push方法完成跳转

在user1里面放一个按钮点击就会跳转到Register页面
代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">User</router-link>
        <router-link :to="{name:'user',params:{id:3}}">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            props: ['id', 'uname', 'age'],
            template: `<div>
                User组件--用户的id是：{{uname}},{{age}},{{id}}
                <button @click='goRegister'>跳转到Register页面</button> 
                </div>`,
            methods: {
                goRegister: function () {
                    this.$router.push('/register')
                }
            }
        }
        var Register = {
            template: `<div>Rgister组件</div>`
        }
        var router = new VueRouter({
            // router是路由规则数组

            routes: [

                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                {
                    // 命名路由
                    name: 'user',
                    path: '/user/:id', component: User, props: route => ({
                        uname: 'zs', age: 12, id: route.params.id
                    })
                },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>

3.例子利用go方法实现跳转
点击注册页面的按钮让他跳转到原来的页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">User</router-link>
        <router-link :to="{name:'user',params:{id:3}}">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            props: ['id', 'uname', 'age'],
            template: `<div>
                User组件--用户的id是：{{uname}},{{age}},{{id}}
                <button @click='goRegister'>跳转到Register页面</button> 
                </div>`,
            methods: {
                goRegister: function () {
                    this.$router.push('/register')
                }
            }
        }
        var Register = {
            template: `<div>Rgister组件
                <button @click='goback'>跳转到原来的页面</button>
                </div>`,
            methods: {
                goback: function () {
                    this.$router.go(-1)
                }
            }
        }
        var router = new VueRouter({
            // router是路由规则数组

            routes: [

                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                {
                    // 命名路由
                    name: 'user',
                    path: '/user/:id', component: User, props: route => ({
                        uname: 'zs', age: 12, id: route.params.id
                    })
                },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>