Vue路由实践-优快云博客

本文链接：https://blog.youkuaiyun.com/ZhiCun_java/article/details/108103976

Vue路由

代码介绍
代码实现
页面效果

代码介绍

vue路由实现多视图单页Web应用

引入依赖库

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.5/vue-router.js"></script>

创建自定义组件

//定义组件
		const Home=Vue.extend({
			template:'<div><h2>Hpme</h2><div>Home页面的主要内容</div></div>'
		});
		const About=Vue.extend({
			template:'<div><h2>About</h2><div>About页面的主要内容</div></div>'
		});

定义路由(即路线)

//定义路由
		var routes=[
			{name:'home',path:'/home',component:Home},
			{path:'/about',component:About}
		];

创建路由器,传 `routes` 配置

//定义路由器
		const router = new VueRouter({routes:routes});
		
	var vm = new Vue({
			router:router,
			methods: {
			
			}
		}).$mount('#app');

创建和挂载根实例。

  var vm = new Vue({router: router}).$mount('#app');

router-link相关属性

4.1 to
      表示目标路由的链接
      <router-link to="/home">Home</router-link><!-- 字符串 -->
      <router-link v-bind:to="'home'">Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->

  4.2 replace
      设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。
      <router-link :to="{ path: '/home'}" replace></router-link>

      vue中导航中的后退-前进-编程式导航
      this.$router.go(-1) ：代表着后退   
      this.$router.go(1)：代表着前进
      this.$router.push({    切换到name为home的路由
      	name:'home'
      });
4.4 有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
      <router-link to="/foo" tag="li">foo</router-link>
      <!-- 渲染结果 -->
      <li>foo</li>

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.5/vue-router.js"></script>
	</head>
	<body>
		<!-- 1、插值 -->
		<div id="app">
			 <div>
			 	<ul>
			 		<li>
			 			<p>
			 				title={{title}},ts={{ts}}
			 			</p>
			 		</li>
			 	</ul>
			 	<router-link to="/home">首页</router-link>
			 	<router-link to="/about">关于我们</router-link>
				<router-link to="/home" replace tag='button'>清空浏览记录</router-link>
			 </div>
			 <div>
				 <button @click="prev">上一页</button>
				 <button @click="next">下一页</button>
				 <button @click="push">跳到指定页</button>
			 </div>
			 <div>
			 	<router-view></router-view>
			 </div>
		</div>
		
		
		
	</body>
	<script>
		//定义组件
		const Home=Vue.extend({
			template:'<div><h2>Hpme</h2><div>Home页面的主要内容</div></div>'
		});
		const About=Vue.extend({
			template:'<div><h2>About</h2><div>About页面的主要内容</div></div>'
		});
		//定义路由
		var routes=[
			{name:'home',path:'/home',component:Home},
			{path:'/about',component:About}
		];
		//定义路由器
		const router = new VueRouter({routes:routes});
		
		var vm = new Vue({
			//el: '#app',
			data: function() {
				return {
					title: 'hello Vue',
					ts: new Date().getTime()
				}
			},
			router:router,
			methods: {
				prev:function(){
					this.$router.go(-1);
				},
				next:function(){
					this.$router.go(1);
				},
				push:function(){
					this.$router.push({
						name:'home'
					});
				}
			}
		}).$mount('#app');
	</script>
</html>