Vue的路由配置，模块引入

VUE学习一

①：路由router的安装：

npm install vue-router --save-dev

在main.js文件中引用

import VueRouter from "vue-router";
//router
Vue.use(VueRouter)

②：axios的安装：

npm install --save axios vue-axios

在main.js文件中引用

import axios from 'axios'
import VueAxios from "vue-axios";
//axios
Vue.use(VueAxios,axios)

③：模块的导入

新建Context.vue文件，在App.vue文件中

import Context from './components/Context'

export default{
  name:"App",
  comments:{
    Context
  }
}

④：路由配置

router.js的代码

import Vue from 'vue'
import VueRouter from "vue-router";
import Context from '../components/Context'
import Main from "../components/Main";
//安装路由
Vue.use(VueRouter)

//配置导出路由

export default new VueRouter({
    routes:[
        {
            //路由路径
            path:'/context',
            name:'context',
            //跳转组件
            component:Context
        },
        {
            //路由路径
            path:'/main',
            name:'main',
            //跳转组件
            component:Main
        },
    ]
})

和django的url.py差不多

还需要在mian.js文件中配置

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

Vue.config.productionTip = false

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

最后用起来

<template>
  <div id="app">
    <router-link to="/main">main</router-link>
    <router-view></router-view>
  </div>
</template>