1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
| import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewSong from '@/views/new-song/new-song'
import Rank from '@/views/rank/rank'
import Search from '@/views/search/search'
import NavBar from '@/components/navBar'
// cil导航
import Home from '@/components/home'
import Document from '@/components/document'
import About from '@/components/about'
//动态参数
import User from '@/components/user'
//引用css样式
import Css from '@/assets/css.css'
Vue.use(Router)
//meta 手动设置下标
let router = new Router({
// 更改路由模式
mode:"history",
// 点击的每一个都是这个颜色
linkActiveClass:'is-active',
scrollBehavior(to,from,savePosition){//点击浏览器的前进后退或切换导航触发
//to 当前需要进入的目标路由对象(要去向哪里)
//from 离开的路由对象 (从哪里来)
//savePosition 滚动的坐标
/* console.log(to);
console.log(from);
console.log(savePosition);*/
/* if(savePosition){
return savePosition;
}else{
return {x:0,y:0}
}*/
if (to.hash) {
console.log(to.hash);
return {
selector:to.hash
}
};
},
routes: [
{
path: '/',
name: 'NewSong',
components: {
nav:NavBar
}
},
{
path: '/home',
name: 'Home',
meta:{
index:1,
title:'home'
},
component: Home
},
{
path: '/document',
name: 'Document',
meta:{
index:2,
login:true,
title:'document'
},
component: Document
},
{
path: '/search',
name: 'Search',
meta:{
index:3,
title:'search'
},
component: Search
},
{
path: '/user/:tip?/:userid?',
name: 'User',
meta:{
index:3
},
component: User
}
]
})
//只要点击别的导航,钩子函数都能被执行
//进入前
router.beforeEach((to,from,next)=>{
console.log('baseEach');
//进入导航需要执行
//next();
//false为不跳转
//next(false);
if (to.meta.login) {
//访问'/document' 跳转到login登录
next('/login');
}else{
next();
}
//进入后
router.afterEach((to,from)=>{
if (to.meta.title) {
window.document.title=to.meta.title;
}else{
window.document.title="默认的";
}
})
});
export default router; |
共 0 条评论关于"vue-cli(Vue-Router)全局钩子函数"
最新评论