Vue中的路由导航

码农小白123

已于 2023-04-19 11:14:28 修改

阅读量844

点赞数

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

于 2023-04-19 11:12:14 首次发布

本文链接：https://blog.youkuaiyun.com/XinShou___/article/details/130238176

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

声明式路由导航

router官网-起步
声明式路由导航其实就是使用官方给的<router-link>路由导航标签直接进行路由跳转

<body>
<div id="app">
        <!--
            <router-link>路由导航标签，用于找到path属性中url对应的组件，
            通过传入 `to` 属性指定链接.<router-link> 默认会被渲染成一个 `<a>` 标签
         -->
        <router-link to="/login">注册</router-link>
        <router-link to="/reg">登陆</router-link>
        <!-- 路由出口
            <router-view>路由出口标签，相当于路由导航标签的一个中转站，通过点击不同的路由导航标签
            来实时的展示该导航标签所对应的组件，路由匹配到的组件将渲染在这里
        -->
        <router-view></router-view>
</div>
<script>
    // 1. 定义 (路由) 组件。
    var login={
        template:'<div><h1>登陆页面</h1></div>'
    }
    var register={
        template: '<div><h1>注册页面</h1></div>'
    }
    //2.定义路由：创建全局路由对象
    var router=new VueRouter({
        //路由的配置
        /**
         * 路由模式：
         * 1.hash模式：默认的, http://localhost:8080/#/路由路径
         * 2.history模式：http://localhost:8080/路由路径
         *
         * 使用mode属性切换路由模式
         */
        mode: 'history',
        //路由列表，用于存放单个路由对象的数组
        routes:[
            /**
             * 单个路由对象用于描述路径url与组件的对应关系，有两个属性：path、component
             * path: 以/开头，路由路径
             * component: 路由路径对应的组件
             */
            {path:'/login',component:login},
            {path:'/reg',component:register},

        ]
    })
    new Vue({
        el: '#app',
        //3.在Vue对象中注册路由对象
        router
    })
</script>
</body>

编程式路由导航

router官网-编程式路由导航
除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

<body>
<div id="app">
        <h1>欢迎使用路由导航</h1>
        <h2>编程式导航</h2>
        <p>
            <!--开启路由导航-->
            <button type="button" v-on:click="doQuery('/login',10,'tom')">登陆按钮</button>
            <button type="button" v-on:click="doQuery('/reg',20,'jerry')">注册按钮</button>
            <button type="button" v-on:click="doParams('user',30,'jack')">用户按钮</button>
            <button type="button" v-on:click="doParams('emp',40,'lishi')">员工按钮</button>
        </p>
        <router-view></router-view>
</div>

<script>
    var login = {template: '<div><h1>登陆组件</h1><p>{{$route.query}}</p></div>'}
    var register = {template: '<div><h1>注册组件</h1><p>{{$route.query}}</p></div>'}
    var user = {template: '<div><h1>用户组件</h1><p>{{$route.params}}</p></div>'}
    var emp = {template: '<div><h1>员工组件</h1>{{$route.params}}</div>'}
    var router = new VueRouter({
        mode: 'history',
        routes: [
            //注册单个路由,有两个重要的属性：path(路由对应的路径)、component(路径对应的组件)
            //下面每个大括号包裹的都是一个单个路由，在配置路由时，可以为每一个路由起一个唯一的名字(名字任意只要不重复即可)，此路由被称为命名路由
            {path: '/login', name:'login', component: login},
            {path: '/reg', name:'reg', component: register},
            {path:'/user', name:'user', component:user},
            {path:'/emp', name:'emp', component:emp}

        ]
    })
    new Vue({
        el: '#app',
        //在Vue对象中注册路由对象
        router,
        methods:{
            doQuery(path,id,name){
                /**
                 * 编程式导航传参
                 * 在push或replace方法中传入的不是路由路径，而是一个对象，该对象有两个重要的属性用于接收方法中的参数
                 * 1.query传参：path属性对应的是路径，query属性对应的是参数对象
                 *
                 * 2.params传参：name对应路由名称(要求路由必须为命名路由)，params参数对象.
                 *              特点：1.无需使用动态路由匹配
                 *                   2.参数在传递的过程中隐藏，不会出现在地址栏中
                 */
                this.$router.push({
                    path: path,
                    query:{
                        id:id,
                        name:name
                    }
                })
            },
            doParams(routeName,id,name){
                this.$router.push({
                    name: routeName,//路由名称，如果将name换成path，则params里面的数据获取不到
                    params:{
                        id:id,
                        name:name
                    }
                })
            }

        }
    })
</script>
</body>