首页 > 其他 > 详细

vue 路由的基本使用

时间:2018-12-12 18:14:22      阅读:156      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        /*.router-link-active{*/
            /*color: red;*/
        /*}*/
        .active{
            color: red;
        }
    </style>

</head>

<body>
<div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/news">新闻</router-link>

     <!--显示路由内容-->
    <router-view></router-view>
</div>


</body>

<script>
    // 1.定义组件
    var home = {
        template: '<h1>home</h1>'
    };
    var news = {
        template: '<h1>news</h1>'
    };
    //2. 配置路由
    const routes = [
        {path:'/home',component:home},
        {path:'/news',component:news},
        {path:'*',redirect:'/home'}
    ];

    //3. 配置路由实例
    const router = new VueRouter({
        routes,
        mode:'history',  //切换不同的模式
        linkActiveClass: "active"  //动态类
    });

    //4. 挂载
    new Vue({
        el: "#app",
        router,
    })


</script>
</html>

vue 路由的基本使用

原文:https://www.cnblogs.com/wspblog/p/10109857.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!