基本用法
<!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>
