WEB前端：vuejs全家桶（30）：路由嵌套和参数传递

最新推荐文章于 2020-05-18 16:48:24 发布

hahahafree

最新推荐文章于 2020-05-18 16:48:24 发布

阅读量104

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102981045

版权

vuejs 专栏收录该内容

40 篇文章 3 订阅

订阅专栏

3. 路由嵌套和参数传递

传参的两种形式：
    a.查询字符串：login?name=tom&pwd=123
        {{$route.query}}
    b.rest风格url：regist/alice/456
        {{$route.params}}

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

<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        /* .router-link-active{
                font-size:20px;
                color:#ff7300;
                text-decoration:none;
            } */
        
        .active {
            font-size: 20px;
            color: #ff7300;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id="itany">
        <div>
            <!-- 第1步：使用router-link组件来定义导航，to属性指定链接url -->
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <!-- 第2步：router-view用来显示路由内容 -->
            <router-view></router-view>
        </div>
    </div>
    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <router-link to="/user/login">用户登陆</router-link>
                <router-link to="/user/regist">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>
</body>
<script>
    // 第3步：定义组件
    var Home = {
        template: '<h3>我是主页</h3>'
    }
    var User = {
        template: '#user'
    }
    var Login = {
        template: '<h4>用户登陆。。。</h4>'
    }
    var Regist = {
            template: '<h4>用户注册。。。</h4>'
        }
        // 第4步：配置路由
    const routes = [{
                path: '/home',
                component: Home
            }, {
                path: '/user',
                component: User,
                children: [{
                    path: 'login',
                    component: Login
                }, {
                    path: 'regist',
                    component: Regist
                }]
            }, {
                path: '*',
                redirect: '/home'
            } //重定向
        ]
        // 第5步：创建路由实例
    const router = new VueRouter({
            routes, //简写，相当于routes:routes
            // mode: 'history',
            linkActiveClass: 'active' //更新活动链接的class类名


        })
        // 第6步：创建根实例并将路由挂载到Vue实例上
    new Vue({
        el: '#itany',
        router //注入路由
    });
</script>

</html>

在这里插入图片描述

 <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <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>

在这里插入图片描述

hahahafree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端：vuejs全家桶（30）：路由嵌套和参数传递

3. 路由嵌套和参数传递传参的两种形式： a.查询字符串：login?name=tom&pwd=123 {{$route.query}} b.rest风格url：regist/alice/456 {{$route.params}}<!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫