vue 路由的基本使用

Posted 2021-01-26 wspblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 路由的基本使用相关的知识，希望对你有一定的参考价值。

<!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 路由的基本使用的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段11——vue路由的配置