Vue Router使用实例

1.创建路由

// myapp\src\views\Home.vue
<template>
    <h1>我是Home</h1>
</template>

<script>
export default {
    data() {
        return {}
    }
}
</script>

2.路由与组件进行映射

// myapp\src\router\index.js

// 路由代码配置编写
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入路由组件
import Home from '../views/Home'
import User from '../views/User'
Vue.use(VueRouter)

// 1.创建路由组件
// 2.将路由与组件进行映射
// 3.挂载到根实例
// 4.渲染路由到出口

// 将路由与组件进行映射
const routes = [
    { path: '/Home', component: Home },
    { path: '/User', component: User }
  ]

  const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
  })

// 将router实例对外暴露
export default router

3.挂载到跟实例

// myapp\src\main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'; // 全局引入
// import { Row, Button } from 'element-ui'; // 按需引入
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI) // 全局引入
// 按需引入,推荐使用、项目打包非常小
// Vue.use(Row)
// Vue.use(Button)

new Vue({
  // 挂载router
  router,
  render: h => h(App),
}).$mount('#app')

4.暴露出口

// myapp\src\App.vue

<template>
  <div id="app">
    <!-- <el-row>
      <el-button disabled>默认按钮</el-button>
      <el-button type="primary" disabled>主要按钮</el-button>
      <el-button type="success" disabled>成功按钮</el-button>
      <el-button type="info" disabled>信息按钮</el-button>
      <el-button type="warning" disabled>警告按钮</el-button>
      <el-button type="danger" disabled>危险按钮</el-button>
    </el-row> -->
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'

}
</script>