VueRouter 基本用法示例

最新推荐文章于 2023-03-31 21:47:55 发布

大马鱼哈

最新推荐文章于 2023-03-31 21:47:55 发布

阅读量231

点赞数

分类专栏： java 文章标签： vue

本文链接：https://blog.csdn.net/majian/article/details/120354897

版权

java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由</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="itany">
        <div>
            <!--使用router-link组件来定义导航，to属性指定链接url-->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <!--router-view用来显示路由内容-->
        <router-view></router-view>
    </div>

    <script>
        // 1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        }
        var News = {
            template: '<h3>我是新闻</h3>'
        }
        // 2.配置路由
        const routes = [
            { path: '/home', component: Home },
            { path: '/news', component: News },
            { path: '*', redirect: '/home' }//重定向，即默认的情况下打来home组件；
        ]
        // 3.创建路由实例
        const router = new VueRouter({
            routes,
            linkActiveClass: 'active'//更新活动链接的class类名
        });
        // 4.创建根实例并将路由挂载到vue实例上
        new Vue({
            el: '#itany',
            router//注入路由
        })
    </script>
</body>

</html>