Vue学习(8)-vue-router、Promise的学习

一、vue-router学习

路由的传值

• URL：
  • 协议://主机:端口/路径？查询
  • scheme://host:post/path?query#fragment

<router-link :to="{path: '/profile'}, query: {name: 'why', age: 18, height: 1.88}">档案</router-link>

<h2>
  {
  {$route.query}}
</h2>
<h2>
  {
  {$route.query.name}}
</h2>

<buutton @cilck="profileClick">档案</buutton>


data() {
	return{
		userId: 'zhangsan',
	}
}
method: {
	userClick() {
		this.$router.push('/user/' + this.userId)
	},
	profileClick() {
		this.$rounter.push({
			path: '/profile',
			query: {
				name: 'kobe',
				age: 19,
      }
		})
	}
}

$router和$route的区别

• $rouer为VueRouter实例，想要导航到不同url，则使用$router.push
• $route为当前router跳转对象里可以获取name、path、query、params等。

全局路由守卫

在路由跳转时监听改变网页标题

//index.js
	{
   
    path: '/about',
    name: 'About',
    // mate: {
   
    //   title: 'home'
    // },
    beforeEnter: (to, from, next) => {
   
      //路由独享的守卫
      next()
    },  
    component: About
  },
	
    
//前置守卫（guard）
router.beforeEach((to, from, next) => {
   
  document.title = to.name,
  // document.title = to.matched[0].meta.title,
  next()
  //调用next方法后，才能进入下一个钩子
})

//后置钩子（hook）
router.afterEach((to, from) => {
   
 	//不需要next()
})

组件内的守卫

const Foo = {
   
  template: `...`,
  beforeRouteEnter (to, from, next) {