vue扩展学习
...
Vue 的 路由?
啥玩意?
能让我完成指哪打哪?节省资源!!
咋用的?
1.安装和基本配置
2.传参及获取传参
-
第一种说不上来的传参方式
{ path: '/user/:name',//01 component: { template:` <div> <h1>我叫:{{$route.params.name}}</h1> <h2>我{{$route.query.age}}岁了</h2> </div>` , }, },
-
第二种 url ? 传参,你懂的
{ path: '/user/:name',//01 component: { template:` <div> <h1>我叫:{{$route.params.name}}</h1> <h2>我{{$route.query.age}}岁了</h2> </div>` , }, }, //02:https://localhost:63342/Vue/1002/index.html?_ijt=ea1g8c1v321br19jkvlfrgenub#/user/%E6%9D%8E%E4%BC%A0%E5%8D%95?age=30
var routes = [
{
path: '/',
component: {
template:`
<div>
<h1>首页</h1>
</div>` ,
},
},
{
path: '/about',
component: {
template:`
<div>
<h1>关于我们</h1>
</div>` ,
},
},
{
path: '/user/:name',
component: {
template:`
<div>
<h1>我叫:{{$route.params.name}}</h1>
<h2>我{{$route.query.age}}岁了</h2>
</div>` ,
},
},
];
var router = new VueRouter({
routes: routes,
});
new Vue({
el: '#app',
router: router,
});
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/王花花">王花花</router-link>
<router-link to="/user/李传单">李传单</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
3.子路由
重点代码
{
path: '/user/:name',
component: {
template:`
<div>
<h1>我叫:{{$route.params.name}}</h1>
<h2>我{{$route.query.age}}岁了</h2>
<!--<router-link :to="'/user/'+ $route.params.name +'/more'">更多信息</router-link>-->
<router-link to="more" append>更多信息</router-link>
<router-view></router-view>
</div>` ,
},
children: [
{
path: 'more',
component: {
template:`
<div>
用户>>{{$route.params.name}}<<的信息<br>
吧嗒吧嗒
</div>
`
}
}
]
},
全部代码
var routes = [
{
path: '/',
component: {
template:`
<div>
<h1>首页</h1>
</div>` ,
},
},
{
path: '/about',
component: {
template:`
<div>
<h1>关于我们</h1>
</div>` ,
},
},
{
path: '/user/:name',
component: {
template:`
<div>
<h1>我叫:{{$route.params.name}}</h1>
<h2>我{{$route.query.age}}岁了</h2>
<!--<router-link :to="'/user/'+ $route.params.name +'/more'">更多信息</router-link>-->
<router-link to="more" append>更多信息</router-link>
<router-view></router-view>
</div>` ,
},
children: [
{
path: 'more',
component: {
template:`
<div>
用户>>{{$route.params.name}}<<的信息<br>
吧嗒吧嗒
</div>
`
}
}
]
},
];
var router = new VueRouter({
routes: routes,
});
new Vue({
el: '#app',
router: router,
});
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/王花花">王花花</router-link>
<router-link to="/user/李传单">李传单</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
4.手动访问和传参
重点代码
new Vue({
el: '#app',
router: router,
methods: {
surf: function () {//button的事件
setTimeout(function () {
this.router.push('/about');
setTimeout(function () {
//this.router.push('/user/王花花');
this.router.push({name:'user',params:{name:'王花花'}});
//对象中name 是路由的名字
},2000)
},2000)
}
}
});
全部代码
var routes = [
{
path: '/',
component: {
template:`
<div>
<h1>首页</h1>
</div>` ,
},
},
{
path: '/about',
component: {
template:`
<div>
<h1>关于我们</h1>
</div>` ,
},
},
{
path: '/user/:name',
name: 'user',//路由名字
component: {
template:`
<div>
<h1>我叫:{{$route.params.name}}</h1>
<h2>我{{$route.query.age}}岁了</h2>
<!--<router-link :to="'/user/'+ $route.params.name +'/more'">更多信息</router-link>-->
<router-link to="more" append>更多信息</router-link>
<router-view></router-view>
</div>` ,
},
children: [
{
path: 'more',
component: {
template:`
<div>
用户>>{{$route.params.name}}<<的信息<br>
吧嗒吧嗒
</div>
`
}
}
]
},
];
var router = new VueRouter({
routes: routes,
});
new Vue({
el: '#app',
router: router,
methods: {
surf: function () {//button的事件
setTimeout(function () {
this.router.push('/about');
setTimeout(function () {
//this.router.push('/user/王花花');
this.router.push({name:'user',params:{name:'王花花'}});
//对象中name 是路由的名字
},2000)
},2000)
}
}
});
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user/王花花">王花花</router-link>
<router-link to="/user/李传单">李传单</router-link>
<button @click="surf">漫游</button>
</div>
<div>
<router-view></router-view>
</div>
</div>
5.命名视图
也就是视图的命名,代码自悟
var routes = [
{
path: '/',
components: {
sidebar: {
template:`
<div>
<h1>首页</h1>
</div>`,
},
content: {
}
},
},
{
path: '/user',
components: {
sidebar: {
template:`
<div>
<h1>用户管理</h1>
<ul>
<li>用户列表</li>
<li>权限管理</li>
</ul>
</div>` ,
},
content:{
template:`
<div>213</div>`,
},
},
},
{
path: '/post',
components: {
sidebar: {
template:`
<div>
<h1>帖子管理</h1>
<ul>
<li>帖子列表</li>
<li>分类管理</li>
</ul>
</div>` ,
},
content:{
template:`
<div>213132</div>`,
},
},
},
];
var router = new VueRouter({
routes: routes,
});
new Vue({
el: '#app',
router: router,
methods: {
}
});
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/user">用户管理</router-link>
<router-link to="/post">帖子管理</router-link>
</div>
<div>
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
</div>
</div>
6.导航钩子
beforeEach() 在路由访问之前干些事情
afterEach() 嗯哼?
var routes = [
{
path: '/',
component: {
template:`
<div>
<h1>首页</h1>
</div>`,
},
},
{
path: '/login',
component: {
template:`
<div>
<h1>登陆</h1>
</div>`,
},
},
{
path: '/post',
component: {
template:`
<div>
<h1>帖子管理</h1>
<ul>
<li>帖子列表</li>
<li>分类管理</li>
</ul>
</div>` ,
},
},
];
var router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) { //在路由访问之前
var logged_in = false; //false 未登陆
if(!logged_in && to.path == '/post')
next('/login');
else
next();
});
router.afterEach(function (to, from) { //路由访问之后
console.log("to:"+to);
console.log("from:"+from);
});
new Vue({
el: '#app',
router: router,
methods: {
}
});
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/post">帖子管理</router-link>
</div>
<div>
<router-view></router-view>
</div>
7.元数据及路由匹配
meta
var routes = [
{
path: '/',
component: {
template:`
<div>
<h1>首页</h1>
</div>`,
},
},
{
path: '/a',
meta: {
login_required: true,
},
component: {
template:`
<div>
<h1>a</h1>
</div>`,
},
},
{
path: '/login',
meta: {
login_required: true,
},
component: {
template:`
<div>
<h1>登陆</h1>
</div>`,
},
},
{
path: '/post',
component: {
template:`
<div>
<h1>帖子管理</h1>
<router-link to="rain" append>雨</router-link>
<router-view></router-view>
</div>` ,
},
children:[
{
path: 'rain',
component: {
template: `<h2>雨天</h2>`,
}
}
]
},
];
var router = new VueRouter({
routes: routes,
});
router.beforeEach(function (to, from, next) { //在路由访问之前
var logged_in = true; //false 未登陆
//console.log(to.matched);
//if(!logged_in && to.path == '/post')
// if(!logged_in && to.matched.some(function (item) {//只要有一个为 /path 就跳转到 登陆页面
// return item.path == '/post';
// }))
if(!logged_in && to.matched.some(function (item) {//只要有一个为 /path 就跳转到 登陆页面
return item.meta.login_required;
}))
next('/login');
else
next();
});
router.afterEach(function (to, from) { //路由访问之后
console.log("to:"+to);
console.log("from:"+from);
});
new Vue({
el: '#app',
router: router,
methods: {
}
});
<div id="app">
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/post">帖子管理</router-link>
<router-link to="/a">a</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>