Vue路由

最新推荐文章于 2024-09-11 17:04:07 发布

原创最新推荐文章于 2024-09-11 17:04:07 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端笔记专栏收录该内容

12 篇文章

订阅专栏

本文展示了如何在项目中引入Vue-router.js来实现页面路由导航。首先确保引入vue.js，然后引入vue-router.js。接着定义路由组件，如welcome、teacher和student，并配置相应的路由路径。创建VueRouter实例并挂载到根实例上，实现页面间的跳转功能。通过<router-link>和<router-view>标签完成视图的切换。

引入vue-router.js

vue-router.js要放到vue.js之后
<script src="js/vue.js"  type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js"></script>

简单例子

<div id="app">
   <h1>hello,world!</h1>
   <p>
	   <!-- 通过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 teacher = {template:`<div>teacher list</div>`}
	const student = {template:`<div>student list</div>`}
	// 2. 定义路由,每个路由应该映射一个组件
	const routes = [
		{path:'/',redirect:'/welcome'},
		{path:'/welcome',component:welcome},
		{path:'/teacher',component:teacher},
		{path:'/student',component:student}
	]
	// 3. 创建router实例,然后传routes配置
	const router = new VueRouter({
		routes  //缩写，相当于 routes:routes
	})
	//4. 创建和挂载根实例，从而让整个应用都有路由功能
	var vm = new Vue({
		el:"#app",
		router
	});
</script>