vuejs笔记之路由钩子beforeEnter/beforeRouteEnter

责编:menVScode 2017-10-29 17:40 阅读(1452)

路由钩子 beforeEnter(to,from,next),参数1:访问后地址obj;参数2:访问前地址obj;参数3:是否加载模板fn;

beforeEnter() 触发的时间:访问这个网址之后,加载模板之前。如果不执行 next() 函数,就不会加载模板。 

import Vue from 'vue'
// 引入文件的路劲没有 ./ 或者 / ,那么直接是找node_modules目录下的文件
import Router from 'vue-router'

const App = {
  'template': `<div id="app">
  	<button @click="$router.go(-1)">返回</button>
  	<button @click="$router.go(1)">前进</button>
    默认显示的内容
    <ul>
      <li><router-link to='/'>index</router-link></li>
      <li><router-link to='/about'>about</router-link></li>
      <li><router-link to='/before'>before</router-link></li>
    </ul>
    <router-view></router-view>
  </div>`
}

// 可以直接{},也可以Vue.component{},根元素只能有一个
const index = {
  template: `<div>这里是index</div>`
}

const about = {
  template: `<div>
    这里是about页面
    <p>{{ $route.params }}</p>
    <router-link to='about/about001'>about001</router-link>
    <router-view></router-view>
  </div>`
}

const before = Vue.component( 'before', {
	template: '<div>这里是before页面</div>'
})
// 根路由显示的地方是第一个 router-view 的标签里
// 子路由显示的地方是父级路由模板里的第一个 router-view 的标签里
const router = new Router({
  routes: [
    {path: '/', component: index},
    // 子路由无需再写 ‘/’
    {path: '/login', name:'login', component: login },
    {path: '/before', component: before, 
    	//触发的时间:访问这个网址之后,加载模板之前
    	//参数1:访问后地址obj;参数2:访问前地址obj;参数3:是否加载模板fn
    	beforeEnter(to,from,next){
    		console.log(arguments);
    		next();//加载模板
    		//不执行第三个参数的话,就不会加载模板了
   		}
	}
  ]
})
// 使用路由插件
Vue.use(Router)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app', 
  router,
  template: '<App/>',
  components: { App }
})


组件内部的钩子函数 beforeRouteEnter(to,from,next),参数同 beforeEnter 函数的参数

const before = Vue.component( 'before', {
	template: '<div>这里是before页面</div>',
	//模板内容显示到页面之前
	beforeRouteEnter(to,from,next){
		console.log(arguments);
		next();
	}
	
})

const router = new Router({
  routes: [
    {path: '/', component: index},
    {path: '/login', name:'login', component: login },
    {path: '/before', component: before, 
    	//触发的时间:访问这个网址之后,加载模板之前
    	//参数1:访问后地址obj;参数2:访问前地址obj;参数3:是否加载模板fn
    	beforeEnter(to,from,next){
    		//console.log(arguments);
    		next();//加载模板
    		//不执行第三个参数的话,就不会加载模板了
   		}
	}
})
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码