vue route summarization

Basic usage and template

【首先，安装路由的包】：npm install vue-router --save

【main.js】页面

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'  /* 1、引入路由 */

/* 4、引入需要路由跳转的相关组件页面 */
import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'

Vue.config.productionTip = false 
Vue.use(VueRouter)   /*2、声明路由的使用 */

const router=new VueRouter({   /*5、配置路由，包括路径设置，组件设置 */
  routes:[
    {path:"/",component:Users}, 
    {path:"/mans",component:Mans},
  ],
  mode:"history"   /* 此行代码可以去除路径中的# */
})

new Vue({
  el: '#app',
  router,   /* 3、在实例化对象里面注册router */
  components: { App },   /* 注意这里是根组件所在处 */
  template: '<App/>'   /* 6、前往根组件处(这里根组件是App.vue)设置路由跳转 */
})


【App.vue】页面
<template>
  <div id="app">
    <!-- 使用router-link添加点击跳转功能 --> 
    <p><router-link to="/">跳转到Users页面</router-link></p>
    <p><router-link to="/mans">跳转到Mans页面</router-link></p>

    <!-- 6、根组件中使用router-view调用路由,类似于react路由的this.props.children -->
      <router-view></router-view> 
    
  </div>
</template>

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

<style></style>