27-路由中引入组件的方式

一、使用CLI脚手架的vue-router使用：

1. 新建vue文件（定义组件）
   导航组件、home组件、about组件

导航组件：

<template>
  <div id="app">
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <ul>
      <li><router-link to="/Home">首页</router-link></li>
      <li><router-link to="/About">关于我们</router-link></li>
    </ul>

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view/>  
  </div>
</template>

<script>

export default {
  name: "app",
  data() {
    return {
    };
  },
};
</script>

2. 配置路由 3. 实例化路由
   router--->index.js

import Vue from 'vue'
import Router from 'vue-router'  //引入vue-router
Vue.use(Router)   //安装使用

import Home from '@/components/main/home.vue'
import About from '@/components/main/about.vue'

//配置路由和实例化路由
export default new Router({
  routes: [
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/About',    
      name: 'About',
      component: About
    },
    { path: '*', redirect: '/Home' },  //页面重定向，默认显示首页
  ]
})

4. 挂载到根实例上
   通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过this.$route访问当前路由

main.js

import Vue from 'vue'
import App from './App'
import router from './router'  
//这里引入的是router目录，会默认识别里面的index.js文件

new Vue({
  el: '#app',  //对应index.html文件里的id
  router,
  components: { App },//App组件注册到vue实例中
  template: '<App/>'//渲染App组件
})