VUE-前端路由的简单使用

一、使用vue@cli创建一个项目

vue init webpack [项目名]  cli2
vue create [项目名] 		cli3

二、找到component目录创建两个组件

Home组件

<template>
  <div>
    <h2>我是Home首页</h2>
    <p>Home内容</p>
  </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>

About组件

<template>
  <div>
    <h2>我是About首页</h2>
    <p>About内容</p>
  </div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped>

</style>

三、在目录找到router/index.html

//配置相关路由信息
import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'
import About from '../components/About'

//1、Vue.use(插件) 来使用这个插件
Vue.use(Router)

//2、创建路由对象
const router = new Router({
  //3、配置路由和组件的应用关系 一个数组
  routes: routes
})

//3.1 配置信息数组抽离
const routes = [
  //一个组件对应一个对象
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

//4、将router传入Vue实例中  导出到main.js
export  default router

四、在App.vue配置两组件

<template>
  <div id="app">
    <router-link to="/home">Home首页</router-link>
    <router-link to="/about">About首页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

五、main.js注册组件（实现单页面富应用）

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //router: router
  router,
  render: h => h(App)
})

启动项目：npm run dev