10. Vue 路由
程序员文章站
2024-02-15 19:04:23
...
10. Vue 路由
-
需要引入 vue-router.js 而且放在vue.js下面
-
代码实现
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
上一篇： OSPF的触发更新过程：
下一篇： Linux 路由基础知识介绍