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>