Vue路由

最新推荐文章于 2018-11-06 12:24:14 发布

WARGON

最新推荐文章于 2018-11-06 12:24:14 发布

阅读量175

点赞数

分类专栏： Vue JS JavaScript

本文链接：https://blog.csdn.net/WARGON/article/details/82872128

版权

JS 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript

22 篇文章 0 订阅

订阅专栏

Vue

15 篇文章 0 订阅

订阅专栏

一个实例：

<!DOCTYPE html>
<html>
	<head>
		<title>Vue.js路由router</title>
		<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
		<script src="https://cdn.bootcss.com/vue-router/2.4.0/vue-router.js"></script>

	</head>
	
	<body>
		<div id="app">
			<div>
				<!-- 使用 router-link 组件来导航. -->
				<!-- 通过传入 `to` 属性指定链接. -->
				<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
				<router-link to="/first">第1个页面</router-link>
				<router-link to="/second">第2个页面</router-link>
				<router-link to="/third">第3个页面</router-link>
			</div>
			<!--路由出口，路由匹配到的组件将渲染在这里-->
			<router-view></router-view>
		</div>
	</body>
	<script>
		/*声明3个模板，也是定义路由组件，可以从其他文件中import进来*/
		var first = {template:'<p>第一个模板</p>'};
		var second = {template:'<p>第二个模板</p>'};
		var third = {template:'<p>第三个模板</p>'};
		
		/*定义路由，每个路由应该映射成一个组件。其中component可以是通过Vue.extend()创建的组件构造器，或者是一个组件配置对象*/
		var routes = [{path:'/first',component:first},
						{path:'/second',component:second},
						{path:'/third',component:third}];
		/*创建router实例，进行routes的配置。还可以配置其他的参数，先不管。*/
		var router = new VueRouter({
			
			/*缩写，等同于routes:routes*/
			routes
		});
		
		/*创建和挂载根实例，通过router配置参数注入路由，从而让整个应用都有路由功能*/
		const app = new Vue({
			/*缩写，等同于:router:router*/
			router
		}).$mount('#app');
		
		/*执行步骤：1，当router-link对应的标签被点击时，比如此时点击第二个，to的值是/second,那么实际的地址就是当前页面地址+#/second。
						这里的#是因为vue-router默认使用hash模式。如果要去除，可以创建router时，使用model:history模式，同时，后台因为需要进行配置。

　　				2，Vue会找到当前vue实例的路由里的routes里面path为/second的路由。

　　				3，会将找到的这一行记录的模板component渲染到router-view里面。*/
	</script>
</html>