Vue路由基本功能 demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
	</head>
	<body>
		<div id="app"></div>


		<script>
			//安装路由插件
			Vue.use(VueRouter);

			//定义(路由)组件
			var Home = {
				props: ['stu'],
				template: `
					<transition name="slide">
						<div>
							<h1>{{ $route.meta.title}}</h1>
							<!-- $route.params.stu 从路由解耦 -->
							<p> {{ stu }}</p>
						</div>
					</transition>
				`
			};
			var HomeA = {
				props: ['stu'],
				template: '<p>HomeA {{ stu }}</p>'
			};
			var HomeB = {
				props: ['stu'],
				template: '<p>HomeB {{ stu }}</p>'
			};
			var About = {
				template: `
					<div>
							<h1>{{ $route.meta.title}}</h1>
							<p>{{ $route.params.id }}</p>
							<!--这里的About页面是被渲染的组件，同样也可以包含自己的渲染 -->
							<router-view></router-view>
							<router-view name="aboutA1"></router-view>
					</div>
				`
			};
			var AboutA = {
				template: '<p>我是关于 AboutA </p>'
			};
			var AboutA1 = {
				template: '<p>我是关于 页面的嵌套命名视图展示 </p>'
			};
			var AboutB = {
				template: '<p>我是关于 AboutB </p>'
			}
			var NotFound = {
				template: '<p>Not Found Page</p>'
			};
			var routes = [
				{
					path: '/:stu',
					components: { <!-- 加上 s -->
						default: Home,
						homeA: HomeA,
						homeB: HomeB
					},
					// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
					props: {
						default: true,
						homeA: true,
						homeB: false
					},
					name: 'home',
					meta: {
						title: '首页'
					}
				},
				{
					path: '/about/:id',
					component: About,
					meta: {
						title: '关于'
					},
					children: [{
							// 当 /about/:id/a 匹配成功，
							// AboutA 会被渲染在 About 的 <router-view> 中
							path: 'a',
							components: { <!-- 嵌套命名视图 -->
								default: AboutA,
								aboutA1: AboutA1
							},
							meta: {
								title: 'AboutA'
							}
						},
						{
							// 当 /about/:id/b 匹配成功
							// AboutB 会被渲染在 About 的 <router-view> 中
							path: 'b',
							component: AboutB,
							meta: {
								title: 'AboutB'
							}
						}
					]
				},
				{
					path:'/notFound',
					component:NotFound
				}
			];

			//映射路由
			var router = new VueRouter({
				routes: routes
			});
			//全局路由改变前钩子
			router.beforeEach(function(to, from, next) {
				if (to.matched.length === 0) { //匹配前往的路由不存在
					 next('/notFound');
				} else {

					//meta 数据并不是只读的，我们可以在代码中根据需求动态地改变它。
					//例如：this.$route.meta.title = "还是首页";
					window.document.title = to.meta.title;

					next();
				}

			});
			var app = {
				data: function() {
					return {
						
					}
				},
				template: `
					<div>
						<h1>Hello App!</h1>
						<button @click="$router.push('/about/aaaaaaa')">编程式的导航</button>
						<button @click="$router.go(-1)">后退</button>
						<button @click="$router.go(1)">前进</button>
					  <p>
							<!-- 使用 router-link 组件来导航. -->
							<!-- 通过传入 to 属性指定链接. -->
							<!-- <router-link> 默认会被渲染成一个 <a> 标签 -->
							<router-link :to="{name:'home',params:{stu:'李四'}}">首页</router-link>
							<router-link to="/about/aaaaaaa">关于</router-link>
							<router-link to="/about/aaaaaaa/a">关于 内的route页面a</router-link>
							<router-link to="/about/bbbbbbbb/b">关于 内的route页面b</router-link>
					  </p>
						
							<!-- 路由匹配到的组件将渲染在这里 -->
							<router-view></router-view>
							<!-- 命名视图。有时候想一个页面展示多个视图，而不是嵌套展示 -->
							<router-view name="homeA"></router-view>
							<router-view name="homeB"></router-view>
						
					</div>
				`
			};
			new Vue({
				el: '#app',
				data: function() {
					return {

					}
				},
				router: router, //挂载路由配置
				components: {
					"app": app
				},
				template: '<app/>'
			});
		</script>
	</body>
</html>
demo按照vue官网搭建的demo
效果展示：
在这里插入图片描述
Vue路由基本功能 demo

猜你喜欢
