vue-router 路由

Posted 2020-12-01 zhd09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-router 路由相关的知识，希望对你有一定的参考价值。

vue-router是Vue.js官方的路由插件，用于构建单页面应用。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

下面是vue-router的登录注册例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>router举例</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 定义路径如何跳转 to属性定义路径 -->
        <!-- router-link标签默认被解析成a链接  -->
        <!-- tag属性可以定义具体是哪个标签 -->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/resign">注册</router-link>
        <router-view></router-view>
        <!-- router-view定义组件显示的容器 -->
    </div>
    <script src="lib/vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>
    <!-- 引入router文件 -->
    <script>
        var tem1 = {
            template: "<h1>登陆组件</h1>"
        }
        var tem2 = {
            template: "<h1>注册组件</h1>"
        }
        // 实例化vuerouter,var routerObj = new VueRouter({})
        // 参数routes，是一个数组，定义路由匹配规则（在什么路径下显示什么组件） 
        // routes有两个参数 path和component
        // path：监听的路由的地址
        // component：表示在这个地址下显示哪个组件
        // redirect：代表路由的重定向 在这个路径下，把地址重新定义
        var routerObj = new VueRouter({
            routes: [
                { path: "/", redirect: "/login" },
                { path: "/login", component: tem1 },
                { path: "/resign", component: tem2 },
            ],
            //linkActiveClass定义router-link被激活时的类名
            linkActiveClass:"active"
        })
        //把定义的路由规则放在new vue中
        var vm = new Vue({
            el: "#app",
            router: routerObj
            //把定义的路由规则放在new vue中
        })
    </script>
</body>
</html>

如果要定义子路由用children表示,它的属性也有path、component

v-router传参：

Ⅰ、query传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>query传参</title>
</head>
<body>
    <div id="app">
        <router-link to="/args?year=90&age=20" >query传参</router-link>
        <router-view></router-view>
    </div>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <script>
        var tem = {
            template: "<h1>传参year为{{$route.query.year}}传参age为{{$route.query.age}}</h1>",
            data(){
                return {
                    id:this.$route.query.year,
                    name:this.$route.query.age
                }
            },
        }
        var routerObj = new VueRouter({
            routes: [
                { path: "/", redirect: "/args" },
                { path: "/args", component: tem },
            ],
        })
        var vm = new Vue({
            el: "#app",
            router: routerObj
        })
    </script>
</body>
</html>

Ⅱ、params传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>params传参</title>
</head>
<body>
    <div id="app">
        <router-link to="/args/90/20" >params传参</router-link>
        <router-view></router-view>
    </div>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <script>
        var tem = {
            template: "<h1>传参year为{{$route.params.year}}传参age为{{$route.params.age}}</h1>",
            data(){
                return {
                    id:this.$route.params.year,
                    name:this.$route.params.age
                }
            },
        }
        var routerObj = new VueRouter({
            routes: [
                { path: "/", redirect: "/args" },
                { path: "/args/:year/:age", component: tem },
            ],
        })
        var vm = new Vue({
            el: "#app",
            router: routerObj
        })
    </script>
</body>
</html>

以上是关于vue-router 路由的主要内容，如果未能解决你的问题，请参考以下文章

百行代码带你入门 vue-router！

vue-router 2.0 常用基础知识点之router-link

Vue-Router的使用详解

vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {

Vue-router路由基础总结