10. Vue 路由

最新推荐文章于 2022-11-29 19:18:27 发布

heaven_dad

最新推荐文章于 2022-11-29 19:18:27 发布

阅读量123

点赞数

分类专栏： Vue 基础学习文章标签： vue 路由 router

本文链接：https://blog.csdn.net/heaven_dad/article/details/107674896

版权

Vue 基础学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

10. Vue 路由

需要引入 vue-router.js 而且放在vue.js下面
代码实现

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <div id="app">
        <h1>hello Vue</h1>
        <p>
            <!-- 使用 router-link 来导航-->
            <!-- 通过传入 to 指定链接 -->
            <!-- router-link默认会渲染成一个a标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件都将渲染在这里 -->
        <router-view ></router-view>
    </div>

    <script>
        //1.定义路由组件
        const Welcome={template: '<div>欢迎</div>'}
        const Student={template: '<div>student list</div>'}
        const Teacher={template: '<div>teacher list</div>'}

        //2.定义路由 每一个路由映射一个组件
        const routes=[
            {path:"/",redirect: "/welcome"},
            {path:"/welcome",component: Welcome},
            {path:"/student",component: Student},
            {path:"/teacher",component: Teacher}
        ]

        //3.创建router实例，然后传routes 配置
        const router=new VueRouter({
            routes
        })

        //4.创建挂载根实例
        const app=new new Vue({
            el: "#app",
            router
        })
    </script>
</body>