6-2 vue-router、vue-cli和单文件组件-路由嵌套、参数传递、路由实例的方法、路由结合动画

目录：

路由嵌套
参数传递
路由实例的方法
路由结合动画

一、路由嵌套

　　我们之前讲了vue-router路由的基本使用，但是我们只是一层，那如果现在路由下，还有路由咋办，也就是路由嵌套，或者说父子路由呐，接下来，我们来说下，路由嵌套是怎么做的。

其实就是一个在配置路由中添加一个children选项，来定义子路由，定义如下：

//2.配置路由
const routes = [
    {
        path:'/user',  //父路由
        component: User,
        children:[ //children选项 定义 子路由
            {
                path: "login",
                component: Login
            },
            {
                path: "regist",
                component: Regist
            }
        ]
    }
];

我们接下来看一个完整的实例，当然，里面的代码被我简化了，简化的代码我们在 vue-router 路由基础中都有： vue-router路由的使用

<body>
    <div id="app">
        .......
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
                <router-link to="/user/login" tag="li">用户登录</router-link>
                <router-link to="/user/regist" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    ....
    <script>
        //1.定义组件
        var User = {
            template: '#user'  //引用user模板
        };

        var Login = {
            template: '<h4>用户登录....</h4>'
        };

        var Regist = {
            template: '<h4>用户注册....</h4>'
        };

        //2.配置路由(包含子路由的配置)
        const routes = [
            .......,
            {
                path:'/user',
                component: User,
                children:[ //children选项用来定义子路由
                    {
                        path: "login",
                        component: Login
                    },
                    {
                        path: "regist",
                        component: Regist
                    }
                ]
            }
        ];
        //3.创建路由实例
        .....
        //4.创建根实例并将路由挂载到Vue实例上
        .....
    </script>
</body>

路由嵌套

上述的例子中有一个知识点要提一下，我们先看上述有一行HTML代码是写成这样的：

<!--传统写法-->
<li><router-link to="/user/login">用户登录</router-link></li>

<!--改进后的写法-->
<router-link to="/user/login" tag="li">用户登录</router-link>

其实传统写法也没有问题，但是在Vue-router 官方api提供一个属性 tag，官方API文档地址：API参考

tag：

类型: string
默认值: "a"

有时候想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

你看看，现在理解了吧。<router-link>还有很多属性，你同样可以可以看API文档：router-link API参考。

二、参数传递

　路由在访问的时候，需要传递参数，我们经常使用的，传参有两种方式：路由对象属性($route获取路由对象的方法说明)

a.查询字符串： login?username=tom&password=123 => path名?参数1=值1&参数2=值2 => 获取值：{{$route.query}}
b.rest风格url： regist/tom/123=> path名/值1/值2 => 获取值：{{$route.params}}

2.1、查询字符串参数传递

<!--查询字符串方式-->
<router-link to="/user/login?username=tom&password=123" tag="li">用户登录</router-link>

//通过$route.query获取{ "username": "tom", "password": "123" }
var Login = {
       template: '<h4>用户登录....{{$route.query}}</h4>'
 };

2.2、rest风格url参数传递

<!--rest风格url-->
<router-link to="/user/regist/tom/123" tag="li">用户注册</router-link>

//通过$route.params 获取 { "username": "tom", "password": "123" }对象
var Regist = {
    template: '<h4>用户注册....{{$route.params}}</h4>'    //{{$route.params.username}}，{{$route.path}}获取url路径
};

//配置路由
const routes = [
    {
        ......
        children:[
            .......,
            {
                path: "regist/:username/:password", //告诉后面两个值，是参数，而不是路由
                component: Regist
            }
        ]
    }
];

至于这个 $route 是哪里来的，那么请你看看 路由对象 吧，官方说的很详细了。

上面是我提取的核心代码，如果还不知道怎么办，完整的代码如下：

<head>
    <meta charset="UTF-8">
    <title>路由嵌套和参数传递</title>
    <style>
        .active {
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <router-link to="/user/login?username=tom&password=123" tag="li">用户登录</router-link>
                <router-link to="/user/regist/tom/123" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        //1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        };

        var User = {
            template: '#user'
        };

        var Login = {
            template: '<h4>用户登录....{{$route.query}}</h4>'
        };

        var Regist = {
            template: '<h4>用户注册....{{$route.params}}</h4>'
        };
        //2.配置路由
        const routes = [
            {path:'/home',component: Home},
            {
                path:'/user',
                component: User,
                children:[ //children选项用来定义子路由
                    {
                        path: "login",
                        component: Login
                    },
                    {
                        path: "regist/:username/:password",
                        component: Regist
                    }
                ]
            }
        ];
        //3.创建路由实例
        const router = new VueRouter({
            routes: routes,
            linkActiveClass: 'active'
        });
        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            router
        }).$mount("#app")
    </script>
</body>

参数传递

参数传递，就学到这里吧....

三、路由实例的方法

　路由实例的方法有很多，官方API 给我们提供了若干个实例的方法：Router 实例方法。

今天我们就先来介绍经常用的两个方法：

router.push()      //添加路由，功能上与<router-link>相同 => 传递参数：1.字符串传递  this.$router.push({path:'/home',query:{name:'jack'}})  2.rest风格url传参  this.$router.push({path:'/home',params:{id: 1}})

router.replace()   //替换路由，不产生历史记录

具体使用如下：

<!--触发事件测试-->
<button @click="push">添加路由</button>
<button @click="replace">替换路由</button>

//vue实例中定义methods去调用
new Vue({
    router,
    methods:{
        push(){
            router.push({path:'home'}); //push是router实例提供的方法，目的：添加路由，切换路由
        },
        replace(){
            router.push({path:'user'}); //替换路由，没有历史记录
        }
    }
}).$mount("#app")

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套和参数传递</title>
    <style>
        .active {
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>

        <hr>
        <button @click="push">添加路由</button>
        <button @click="replace">替换路由</button>
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <router-link to="/user/login?username=tom&password=123" tag="li">用户登录</router-link>
                <router-link to="/user/regist/tom/123" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        //1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        };

        var User = {
            template: '#user'
        };

        var Login = {
            template: '<h4>用户登录....{{$route.query}}</h4>'
        };

        var Regist = {
            template: '<h4>用户注册....{{$route.params}}</h4>'
        };
        //2.配置路由
        const routes = [
            {path:'/home',component: Home},
            {
                path:'/user',
                component: User,
                children:[ //children选项用来定义子路由
                    {
                        path: "login",
                        component: Login
                    },
                    {
                        path: "regist/:username/:password",
                        component: Regist
                    }
                ]
            }
        ];
        //3.创建路由实例
        const router = new VueRouter({
            routes: routes,
            linkActiveClass: 'active'
        });
        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            router,
            methods:{
                push(){
                    router.push({path:'home'}); //push是router实例提供的方法，目的：添加路由，切换路由
                },
                replace(){
                    router.push({path:'user'}); //替换路由，没有历史记录
                }
            }
        }).$mount("#app")
    </script>
</body>
</html>

路由实例的方法

四、路由结合动画

　之前我们学过过渡动画结合第三方的第三方 CSS 动画库 Animate.css，那我们也结合一下使用，看看我们在切换路由的时候，也可以自定义自己的一些动画效果：

<head>
    .....
    <!--animated是基础样式，必须要有-->
    <link rel="stylesheet" href="css/animate.css">
     .....
</head>

//容器app
<div id="app">
    <div>
        ......
    </div>
    <div>
        <!--只需要在<router-view>加上transition就可以了，因为router-view显示的内容-->
        <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOouRight">
            <router-view></router-view>
        </transition>
    </div>
    .....
</div>

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套和参数传递</title>
    <!--animated是基础样式，必须要有-->
    <link rel="stylesheet" href="css/animate.css">
    <style>
        .active {
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <!--只需要在<router-view>加上transition就可以了，因为router-view显示的内容-->
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOouRight">
                <router-view></router-view>
            </transition>
        </div>
    
        <hr>
        <button @click="push">添加路由</button>
        <button @click="replace">替换路由</button>
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <router-link to="/user/login?username=tom&password=123" tag="li">用户登录</router-link>
                <router-link to="/user/regist/tom/123" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        //1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        };

        var User = {
            template: '#user'
        };

        var Login = {
            template: '<h4>用户登录....{{$route.query}}</h4>'
        };

        var Regist = {
            template: '<h4>用户注册....{{$route.params}}</h4>'
        };
        //2.配置路由
        const routes = [
            {path:'/home',component: Home},
            {
                path:'/user',
                component: User,
                children:[ //children选项用来定义子路由
                    {
                        path: "login",
                        component: Login
                    },
                    {
                        path: "regist/:username/:password",
                        component: Regist
                    }
                ]
            }
        ];
        //3.创建路由实例
        const router = new VueRouter({
            routes: routes,
            linkActiveClass: 'active'
        });
        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            router,
            methods:{
                push(){
                    router.push({path:'home'}); //push是router实例提供的方法，目的：添加路由，切换路由
                },
                replace(){
                    router.push({path:'user'}); //替换路由，没有历史记录
                }
            }
        }).$mount("#app")
    </script>
</body>
</html>

路由结合动画

posted @ 2020-03-17 10:10 帅丶高高阅读(316) 评论(0) 收藏举报

刷新页面返回顶部

极其内向的帅小伙