Vue--router--->>>一个简单的路由

最新推荐文章于 2024-04-11 02:28:33 发布

郭浩326

最新推荐文章于 2024-04-11 02:28:33 发布

阅读量459

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72821599

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>

</head>
<body>
        <div id="app">
            <ul class="nav nav-pills">
                <li><router-link to="/index">首页</router-link></li>
                <li><router-link to="/books">图书列表</router-link></li>
                <li><router-link to="/games">游戏列表</router-link></li>
            </ul>
            <div>
                <!--- 使用router-view 进行显示 --->
                <router-view></router-view>
            </div>
        </div>

</body>
<script>
    /**
     * 配置路由，使用官方的VueRouter
     * new VueRouter 得到一个VueRouter的实例
     * 在VueRouter中传递参数（对象）
     * 在参数中有个routes的数组属性
     * 这个数组是一个对象数组
     * 每一个对象就是一个路由状态
     */
    var router = new VueRouter({
        routes:[
            {
                path:"/index",
                component:{
                    template:"<h1>我是首页</h1>"
                }
            },
            {
                path:"/books",
                component:{
                    template:"<h1>我是图书</h1>"
                }
            },
            {
                path:"/games",
                component:{
                    template:"<h1>我是游戏</h1>"
                }
            },
            {       //设置默认显示“”里面为空；
                path:"",
                redirect:"/index"
            }
        ]
    });

    var app=new Vue({
        data:{
            username:"小明"
        },
       router:router
    }).$mount("#app")
</script>
</html>