艾利百科--临沂网站制作,临沂网页设计,临沂微信公众号,兼容并蓄,开放共赢!

艾利百科

当前位置: 主页 > 网站制作 > VUE框架 >

Vue路由及二级路由的使用方法

时间:2018-10-01 15:54来源:未知 作者:kunbeatable 点击:
路由可以让我们在页面中加载不同的模板内容, 使用vue的路由,需要借助vue-router.js script src =https://unpkg.com/vue/dist/vue.js / script script src =https://unpkg.com/vue-router/dist/vue-router.js / script 我们使用路由配置一个tab切换,点击首

路由可以让我们在页面中加载不同的模板内容,

使用vue的路由,需要借助vue-router.js

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

我们使用路由配置一个tab切换,点击首页和列表分别显示不同内容,并且点击的时候,url中的路径会发生对应的改变。


代码如下:代码解释在注释中。

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">首页</router-link> <!-- 会被vue识别,自动显示成a标签-->
            <router-link to="/List">列表</router-link> <!-- 会被vue识别,自动显示成a标签-->
        </div>
        <div>
            <router-view></router-view>    <!-- 点击上面的link标签由,需要显示模板的地方 -->
        </div>
    </div>
</body>
<script>
    /*组件*/
    var Home = {
        template:"<h3>我是主页的内容</h3>"
    };
    var List = {
        template:"<h3>我是文章列表</h3>"
    };

    //配置路由
    var routerArr=[
        {
            path:"/home", /* router-link 的 to跳转的地址 */
            component:Home  /* 路径对应的组件 */
        },
        {
            path:"/List", /* router-link 的 to跳转的地址 */
            component:List  /* 路径对应的组件 */
        },
        {path:"*",component:Home}  /*其他的所有情况,都跳转到首页*/
    ];

    //生成路由示例
    var router= new VueRouter({
        routes:routerArr
    });

    //vue实例
    var vm=new Vue({
        el:'#box',
        data:{},
        /* 示例挂载路由 */
        router:router
    })
</script>
</html>
复制代码

 

二级路由:具体解释在注释中

注:

二级路由使用children来配置 ,内部配置和一级路由一样

tab切换中的当前选项标签会自动添加 router-link-active类,我们只需要设置该类的样式,就可以实现当前选中的样式了。

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            padding: 30px;
        }
        ul, li{
            display: inline-block;
            list-style: none;
        }
        #box a{
            text-decoration: none;
            color: #2479dc;
            padding: 5px 15px;
        }
        #box .router-link-active{
            background: #2479dc;
            color: #fff;
        }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">首页</router-link> <!-- 会被vue识别,自动显示成a标签-->
            <router-link to="/List">列表</router-link>
            <router-link to="/users">用户</router-link>
        </div>
        <div>
            <router-view></router-view>    <!-- 点击上面的link标签由,需要显示模板的地方 -->
        </div>
    </div>

    <!-- 模板 temUser -->
    <template id="temUser">
        <div>

            <h3>用户信息</h3>
            <hr/>
            <ul>
                <li><router-link to="/users/xiaoming">小明</router-link></li>
                <li><router-link to="/users/xiaohong">小红</router-link></li>
            </ul>
            <div>
                <router-view></router-view>    <!-- 点击上面的link标签由,需要显示模板的地方 -->
            </div>
        </div>
    </template>

</body>
<script>
    /*组件*/
    var Home = {
        template:"<h3>我是主页的内容</h3>"
    };
    var List = {
        template:"<h3>我是文章列表</h3>"
    };
    //用户
    var users = {
        template:"#temUser"
    };

    var xiaoming = {
        template:"<h3>我是小明</h3>"
    }
    var xiaohong = {
        template:"<h3>我是小红</h3>"
    }

    //配置路由
    var routerArr=[
        {
            path:"/home", /* router-link 的 to跳转的地址 */
            component:Home  /* 路径对应的组件 */
        },
        {
            path:"/List", /* router-link 的 to跳转的地址 */
            component:List  /* 路径对应的组件 */
        },
        {
            path:"/users", /* router-link 的 to跳转的地址 */
            component:users,  /* 重定向到首页 */
            children:[        /* 二级路由使用children来配置 ,内部配置和一级路由一样 */
                {path:"xiaoming",component:xiaoming},
                {path:"xiaohong",component:xiaohong},
                {path:"/",redirect:"xiaoming"}
            ]
        },
        {path:"*",component:Home}  /*其他的所有情况,都跳转到首页*/
        //{path:"/",redirect:"/home"} /*也可以用这样的形式定义首页*/

    ];

    //生成路由示例
    var router= new VueRouter({
        routes:routerArr
    });

    var vm=new Vue({
        el:'#box',
        data:{},
        /* 示例挂载路由 */
        router:router
    })
</script>
</html>
复制代码

顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片