(精華2020年5月8日更新) vue教程篇 vue-router路由的使用

2b勿擾發表於2020-05-06
Vue路由

基本用法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>路由基本用法</title>
	<style>
		/* .router-link-active{
			font-size:20px;
			color:#ff7300;
			text-decoration:none;
		} */
		.active{
			font-size:20px;
			color:#ff7300;
			text-decoration:none;
		}
	</style>
	<script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
</head>
<body>
	<div id="itapp">
        <div>
            <!-- a標籤 -->
            <router-link to='/home' >主頁</router-link>  
            <router-link to='/news'>新聞</router-link> 
        </div>
        <div>
            <!-- 用來顯示內容 -->
            <router-view></router-view>
        </div>
	</div>

	<script>
        // 1.定義元件
        var Home={
			template:'<h3>我是主頁</h3>'
		}
		var News={
			template:'<h3>我是新聞</h3>'
		}
		
        // 2.配置路由
        var routesAll= [{
            path:'/home',
            component:Home
        },{
            path:'/news',
            component:News
        }];
        //3. 建立路由例項

        var router = new VueRouter({
            routes:routesAll,
            mode:'hash', //history
            linkActiveClass:'active' //當前所處的連結的class
        })

        // 4.將router掛載在vue例項上
		new Vue({
			el:'#itapp',
            // router:router , 
            router  //注入路由
		});
	</script>
</body>
</html>

路由巢狀傳遞引數和路由守衛

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>路由巢狀和引數傳遞 tag</title>
	<style>
		.active {
			font-size: 20px;
			color: #ff7300;
			text-decoration: none;
		}
	</style>
	<script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
</head>

<body>
	<div id="itapp">
		<div style="position: fixed;top:180px">
			<router-link to="/home">主頁</router-link>
			<router-link to="/user">使用者</router-link>
		</div>
		<div style="height:2000px">
			<router-view></router-view>
		</div>

		<hr>
		<button @click="push">新增路由</button>
		<button @click="replace">替換路由</button>
	</div>

	<template id="user">
		<div style="height:2000px">
			<h2>使用者資訊</h2>
			<ul>
				<router-link to='/user/login?name=tom&pwd=123'>使用者登入</router-link>
				<router-link to='/user/regist/alice/456'>使用者註冊</router-link>
			</ul>
			<router-view></router-view>
		</div>
	</template>

	<script>
		var Home = {
			template: '<div><h3>我是主頁 {{$route.params}}</h3></div>'
		}
		var User = {
			template: '#user'
		}
		var Login = {
			template: '<h4>使用者登陸。。。獲取引數：{{$route.query}},{{$route.path}}</h4>'
		}
		var Regist = {
			template: '<h4>使用者註冊。。。獲取引數：{{$route.params}},{{$route.path}}</h4>'
		}

		const routes = [{
				path: '/home',
				name: 'home',
				component: Home
			},
			{
				path: '/user',
				name: 'user',
				component: User,
				beforeEnter(from, to, next) {
					console.log(`from ${from.fullPath},to ${to.fullPath}`);
					setTimeout(() => {
						next();
					}, 500)
				},
				// beforeLeave(from,to,next){
				//     console.log(`from ${from.fullPath},to ${to.fullPath}`);
				//     console.log('beforeLeave');
				//     next();
				// },
				//子路由使用： 需要在上一級 (User)路由頁面加上router-view
				// 子路由使用，需要再上一級路由頁面加上 router-view 顯示。
				// 使用children屬性實現路由巢狀,子路由path前不要加/，否則永遠以根路徑開始請求
				children: [{
					path: 'login',
					name: 'login',
					component: Login
				}, {
					path: 'regist/:username/:password',
					name: 'regist',
					component: Regist
				}]

			},
			{
				path: '*',
				redirect: '/home'
			}
		]

		const routerAll = new VueRouter({
			routes: routes, //簡寫，相當於routes:routes
			linkActiveClass: 'active', //更新活動連結的class類名,預設的啟用的 class
			linkExactActiveClass: 'active-extact', //精確啟用的 class
			mode: "hash", //預設
			//   頁面跳轉後，頁面是否滾動
			scrollBehavior(to, from, savedPostion) {
				if (savedPostion) {
					return savedPostion;
				} else {
					return {
						x: 0,
						y: 0
					}; //每次切換頁面都是滾動到頁面頂部
				}
			}
		});

		var vm = new Vue({
			el: '#itapp',
			router: routerAll, //注入路由
			// test:routerAll,  //一般不這麼寫
			methods: {
				push() {
					// 1.字串形式
					// this.$router.push('/home')
					// //2. 物件
					// this.$router.push({
					//     path:'/home'
					// })

					//  //2. 物件,帶查詢引數
					//  this.$router.push({
					//     path:'/home',
					//     query:{
					//         plan:'private'
					//     }
					// })
					// 獲取引數$route.query, 相當於get

					// 3.命令路由
					// this.$options.test({
					//     name:'home',
					//     params:{
					//         userid:'123'
					//     }
					// });

					this.$router.push({
						name: 'home',
						params: {
							userid: '123'
						}
					})
					// 獲取引數$route.params

				},
				replace() {
					routerAll.replace({
						path: 'user'
					}); //替換路由，沒有歷史記錄
				}
			}
		});
	</script>
</body>

</html>

相關文章