vue-router学习笔记

npm install vue-router

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘

new Vue({
  router,
  render: h => h(App)
}).$mount(‘#app‘)

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘./views/Home.vue‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘home‘,
      component: Home
    },
    {
      path: ‘/about‘,
      name: ‘about‘,
      component: () => import(‘./views/About.vue‘)//import实现懒加载
    }
  ]
})

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/home">Go to home</router-link>
    <router-link to="/about">Go to about</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// 字符串
router.push(‘home‘)
// 对象
router.push({ path: ‘home‘ })
// 命名的路由
router.push({ name: ‘user‘, params: { userId: 123 }})
//带有别名的路由
router.push(别名)
// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register‘, query: { plan: ‘private‘ }})

// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)
// 后退一步记录，等同于 history.back()
this.$router.go(-1)

//route
path: ‘/about/:user‘,
//上个页面
this.$router.push(‘about/admin‘)
//当前页面  http://localhost:8080/#/about/admin
this.$route.params //{user: "admin"}

//上个页面
this.$router.push({path: ‘about‘, query: { user: ‘admin‘}})
//当前页面  http://localhost:8080/#/about?user=admin
this.$route.query //{user: "admin"}

//上个页面
this.$router.push({name: ‘about‘, params: { user: ‘admin‘}})
//当前页面  http://localhost:8080/#/about
this.$route.params //{user: admin}

//route.js
{
      path: ‘/about‘,
      name: ‘about‘,
      props: {
        user: ‘admin‘
      }
    }
//about.vue
export default {
    props: {
      user: {
        type: String,
        default: ‘user‘
      }
    }
}     

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <router-view></router-view>
  </div>
</template>

{
      path: ‘/about‘,
      name: ‘about‘,
      component: About,
      children: [
        { path: ‘‘, component: () => import(‘./components/email.vue‘) },
        { path: ‘tel‘, component: () => import(‘./components/tel.vue‘) },
      ]
},

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

{
      path: ‘/about‘,
      name: ‘about‘,
      components: {
        default: About,
        a: () => import(‘./components/email.vue‘),
        b: () => import(‘./components/tel.vue‘)
      }
  },

{ path: ‘/a‘, redirect: ‘/b‘ }
{ path: ‘/a‘, redirect: { name: ‘foo‘ }}
{ path: ‘/a‘, redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
}}

{ path: ‘/a‘, component: A, alias: ‘/b‘ }

router.beforeEach((to, from, next) => {
  if (to.name !== ‘login‘) {
    if (HAS_LOGINED) next()
    else next({ name: ‘login‘ })
  } else {
    if (HAS_LOGINED) next({ name: ‘home‘ })
    else next()
  }
})

router.afterEach((to, from) => {
  // logining = false  清除加载层
})

path: ‘/foo‘,
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next(vm => {
        // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    //弹出框 是否要保存当前页面的信息
  }