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

基本用法

<!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:'

我是主页

'
} var News={ template:'

我是新闻

'
} // 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: '

我是主页 {{$route.params}}

'
} var User = { template: '#user' } var Login = { template: '

用户登陆。。。获取参数:{{$route.query}},{{$route.path}}

'
} var Regist = { template: '

用户注册。。。获取参数:{{$route.params}},{{$route.path}}

'
} 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>

你可能感兴趣的:((持续更新)vue基础篇)