Vue初学-路由router

最新推荐文章于 2024-07-08 11:10:25 发布

不会写文章的猴子

最新推荐文章于 2024-07-08 11:10:25 发布

阅读量173

点赞数

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

本文链接：https://blog.csdn.net/qq_41809137/article/details/105916794

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

注册路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/page1">页面1</router-link>
        <router-link to="/page2">页面2</router-link>
        <router-view></router-view>
    </div>
    <script>
        let page1={
            template:"<h1>这是页面1111111111111</h1>"
        }
        let page2={
            template:"<h1>这是页面2222222222222</h1>"
        }
        //配置路由 向路由中注册页面
        var routes=[
            {path:"/page1",component:page1},
            {path:"/page2",component:page2}
        ]
        //创建vue的路由对象
        var router=new VueRouter({
            routes
        })
        //注册路由信息
        var vm=new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>

我们需要引入对应的vue的路由文件，地址“ https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js”,需要注意的是必须先引入vue的地址，然后在引入vue的路由的地址，因为vue的路由是依赖于vue的。
使用VueRouter创建vue的路由对象，向routes属性添加一个或者多个路由规则，path指定的是路由的地址，component指定的是匹配到的路由的对应的页面（组件）,最后只需要将创建的路由的实例注册到对应的vue实例上即可。

动态路由

在这里插入图片描述
路由中包含？并且？后面是参数的路由，？后面的参数改变时对应的页面数据也会改变的路由，我们称之为动态路由。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/page2?id=20&name=Tim">页面2</router-link>
        <router-view></router-view>
    </div>
    <script>
        let page2={
            template:"<h1>这是页面2222222222222</h1>",
            mounted () {
                console.log(this.$route.query);
            }
        }
        var routes=[
            {path:"/page2",component:page2},
        ]
        var router=new VueRouter({
            routes
        })
        var vm=new Vue({
            el:"#app",
            router,
            methods: {
                toPage(){
                    this.$router.push({
                        path:"/page2"
                    })
                }
            }
        })
    </script>
</body>
</html>

获取动态路由的参数，我们可以使用this.$route.query，它获取到的是一个对象：
在这里插入图片描述

伪静态路由

在这里插入图片描述
像这种没有？看起来也没有参数的路由，我们称之为伪静态路由。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/page1/1/Tom">页面1</router-link>
        <router-view></router-view>
    </div>
    <script>
        let page1={
            template:"<h1>这是页面1111111111111</h1>",
            mounted () {
                console.log(this.$route.params);
            }
        }
        var routes=[
            {path:"/page1/:id/:name",component:page1},
        ]
        var router=new VueRouter({
            routes
        })
        var vm=new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>

获取动态路由的参数，我们可以使用this.$route.query，它获取到的是一个对象：
在这里插入图片描述
之所以获取的是一个对象，那是因为这是我们在配置路由时手动配置的,路由的规则path里面的参数变量必须是有冒号的，而且每个参数之间必须用一个符号隔开，一般我们都使用/来隔开每一个参数，如上图： {path:"/page1/:id/:name",component:page1},。

name属性

<router-link :to="{name:'page3',params:{id:1,name:'Jim'}}">页面3</router-link>

需要在对应的在路由规则上也加上name属性

{path:"/page3/:id/:name",component:page3,name:"page3"},

如果要添加参数将参数添加到params对象中即可。

path属性

 <router-link :to="{path:'/page1/1/Tom'}">页面4</router-link>

使用path属性来指定要跳转的页面。

router-link的tag属性

<router-link :to="{path:'/page1/1/Tom'}" tag="p">伪装的超链接</router-link>

效果图：
在这里插入图片描述
tag属性的值是标签的名称，router-link标签便会变成对应的标签的样子，但是还保留router-link标签的功能。

编程式跳转

<button @click="toPage">跳转</button>

var vm=new Vue({
            el:"#app",
            router,
            methods: {
                toPage(){
                    this.$router.push({
                        path:"/page2"
                    })
                }
            }
        })

使用this.$router.push()的方式进行跳转，path属性去指定要跳转的页面。