Vue从入门到实战：感受前端路由

来自CloudWiki
跳转至： 导航， 搜索

单页应用程序

传统Web应用程序：不同页面间跳转都是向服务器发起请求，然后向浏览器推送页面

单页应用程序中，不同视图的内容都是在同一个页面中进行渲染，页面间的跳转都是在浏览器端完成的，

这就需要用到前端路由。

在Vue.js中，可以使用官方的路由管理器Vue Router

Vue Router下载安装

方法1：引用网上CDN

<script src="https://unpkg.com/vue-router@3.3.4/dist/vue-router.js"></script>

方法2 下载引用

<script src="vue-router.js"></script>

方法3 NPM安装

npm install vue-router

HTML页面使用路由

设置导航链接

			<p>
				<!-- 使用router-link组件来导航 -->
    		<!-- 通过传入to属性指定链接-->
    		<!-- <router-link>默认会被渲染成一个<a>标签 -->
				<router-link to="/news">新闻</router-link>
				<router-link to="/books">图书</router-link>
				<router-link to="/videos">视频</router-link>
			</p>

指定组件在何处渲染

		<!-- 路由出口 -->
  		<!-- 路由匹配到的组件将在这里渲染 -->
			<router-view></router-view>

当单击链接的时候，会在<router-view>所在的位置渲染组件的模板内容。可以把<router-view>理解为占位符。

定义路由组件

			// 定义路由组件
			// 可以从其他文件import进来
			const news = { template: '<div>新闻页面</div>' }
			const books = { template: '<div>图书页面</div>' }
			const videos = { template: '<div>视频页面</div>' }

定义路由

将第1步设置的链接URL和组件对应起来 

			// 定义路由
			// 每个路由应该映射到一个组件。 
			// 组件可以是通过Vue.extend()创建的组件构造器，
			// 或者只是一个组件选项对象。
			const routes = [
			  { path: '/news', component: news },
			  { path: '/books', component: books },
			  { path: '/videos', component: videos }
			]

创建VueRouter实例

创建VueRouter实例,将上一步定义的路由配置作为选项传递进去。 

			// 传递routes选项，创建 router 实例。
			const router = new VueRouter({
  			routes // (缩写) 相当于 routes: routes
			})

将router选项注入根实例

将router选项注入根实例, 从而让整个应用程序具备路由功能。 

			// 创建和挂载根实例。
			// 使用router选项注入路由，从而让整个应用都有路由功能
			new Vue({
			  el: '#app',
			  router: router
			})

完整代码

<!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第一个案例-helloWorld</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

	<!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/vue-router@3.3.4/dist/vue-router.js"></script>
				 
	</head>
	<body>
		
		<div id="app">
			<p>
				<!-- 使用router-link组件来导航 -->
    		<!-- 通过传入to属性指定链接-->
    		<!-- <router-link>默认会被渲染成一个<a>标签 -->
				<router-link to="/news">新闻</router-link>
				<router-link to="/books">图书</router-link>
				<router-link to="/videos">视频</router-link>
			</p>
			<!-- 路由出口 -->
  		<!-- 路由匹配到的组件将在这里渲染 -->
			<router-view></router-view>
		</div>
		<script type>
			// 定义路由组件
			// 可以从其他文件import进来
			const news = { template: '<div>新闻页面</div>' }
			const books = { template: '<div>图书页面</div>' }
			const videos = { template: '<div>视频页面</div>' }
			
			// 定义路由
			// 每个路由应该映射到一个组件。 
			// 组件可以是通过Vue.extend()创建的组件构造器，
			// 或者只是一个组件选项对象。
			const routes = [
			  { path: '/news', component: news },
			  { path: '/books', component: books },
			  { path: '/videos', component: videos }
			]
			
			// 传递routes选项，创建 router 实例。
			const router = new VueRouter({
  			routes // (缩写) 相当于 routes: routes
			})

			// 创建和挂载根实例。
			// 使用router选项注入路由，从而让整个应用都有路由功能
			new Vue({
			  el: '#app',
			  router: router
			})
		</script>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：感受前端路由&oldid=31404”