vue路由vue-router

npm install vue-router --save

<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签

<router-view>：该标签会根据当前路径，渲染出不同的组件

网页中其他的内容，比如顶部的标题/导航，或者底部的一些版权信息会和<router-view>出于同一个等级

在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

mode: 'history'

<router-link to="/home" tag="button">首页</router-link>

<router-link to="/home" tag="button" replace>首页</router-link>

<router-link to="/home" tag="button" replace active-class="active">首页</router-link>

<button @click="homeClick">首页</button>

methods: {
  homeClick() {
    // 通过代码的范式修改路径 vue-router
    this.$router.push('/home')
    console.log('homeClick');
  }
}

{
  path: '/user/:userId',
  name: 'User',
  component: User
}

<template>
  <div>
    <h2>我是用户界面</h2>
    <p>用户信息</p>
    <h2>{{ userId }}</h2>
    <h2>{{ $route.params.userId }}</h2>
  </div>
</template>

<script>
  export default {
    name: "User",
    computed: {
      userId() {
        return this.$route.params.userId
      }
    }
  }

</script>

const Home = resolve => {
  require.ensurre(['../components/Home.vue'],()=>{
    resolve(require('../components/Home.vue'))
  })
}

const About = resolve => require(['../compontents/About.vue'], resolve);

// 懒加载方法导入(一个懒加载对应一个js文件)
const Home = () => import('../components/Home')

<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>

<router-view></router-view>

{
  path: '/home',
  name: 'Home',
  component: Home,
  children: [
    {
      path: '',
      redirect: '/news'
    },
    {
      path: 'news',
      component: HomeNews
    },
    {
      path: 'message',
      component: HomeMessage
    },
  ]
},

# router-link
<router-link :to="{ path: '/profile',query:{id:'1',name:'charles'}}">个人资料</router-link>

# button
<button @click="userClick">用户</button>
<button @click="profileClick">个人资料</button>
<router-view></router-view>

userClick() {
  this.$router.push('/user/' + this.userId)
},
profileClick() {
  this.$router.push({
    path: '/profile',
    query: {
      id: 2,
      name: 'tom'
    }
  })
}

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

// 前置守卫(guard)
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
})
// 后置钩子(hook)
router.afterEach((to,from)=>{
  
})

{
  path: '/about',
  name: 'About',
  meta: {
    title: '关于'
  },
  component: About
},

<script>
  export default {
    name: "Home",
    created() {  // 创建组件
      console.log('created');
      // document.title = '首页'
      document.title = to.matched[0].meta.title
    },
    // mounted() {  // 挂载到dom
    //   console.log('mounted');
    // },
    // updated() { // 界面发生刷新
    //   console.log('updated');
    // }
  }
</script>

// 这两个函数，只有该组件被保持了装填使用keep-alive时，才是有效的
activated() {
  this.$router.push(this.path)
},
beforeRouteLeave(to, from, next) {
  this.path = this.$route.path;
  next()
}

<keep-alive>
  <router-view/>
</keep-alive>