15、Vue路由

一、什么是Vue路由

动态的在组件中挂载不同的组件

二、Vue路由配置

1、进入项目，安装vue-router：cnpm install vue-router --save

2、在main.js中引入vue-router，并Vue.use

3、在main.js中配置路由

①创建组件并引入组件 

Home.vue组件代码：

<template>
  <div>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '首页组件'
      }
    }
  }
</script>

News.vue组件代码：

<template>
  <div>
    <h2>{{title}}</h2>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        title: "新闻组件"
      }
    }
  }
</script>

引入组件：

②定义路由

//建议不要修改routes名称，避免出错
const routes = [
  {path: '/home', component: Home},
  {path: '/news', component: News},
  //默认跳转路由，若路由匹配不到，则跳转到首页
  {path: '*', redirect: '/home'}
]

 ③实例化VueRouter

const router = new VueRouter({
  //routes简写方式，相当于routes:routes
  routes
})

④挂载路由

4、哪个组件需要动态挂载其他组件，需要添加代码

 <router-view></router-view>

APP.vue代码：

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {}
    }
  }
</script>