VUE-前端路由的简单使用

一、使用[email protected]创建一个项目

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,
  //使用history模式跳转，默认是hash
  mode: 'history',
  //**的全局class属性
  linkActiveClass: 'active'
})

//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" tag="button" replace active-class="active">Home首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">About首页</router-link>-->
    <!--<router-link to="/home" tag="button">Home首页</router-link>
    <router-link to="/about" tag="button">About首页</router-link>-->
    <button @click="home_click">按钮</button>
    <button @click="about_click">按钮</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    home_click() {
      //push = pushStatus  使用代码实现路由跳转
      //this.$router.push('/home')
      this.$router.replace('/home')
      console.log('home_click');
    },
    about_click() {
      //this.$router.push('/about')
      this.$router.replace('/about')
      console.log('about_click');
    }
  }
}
</script>

<style>
  /*.router-link-active {*/
  /*  color: red;*/
  /*}*/
  .active {
    color: red;
  }
</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