Vue路由

alice--小文子 2022-09-23 09:32:14 阅读数:383

vueCSDN路由technology-development

1 路由表:(路由相关的功能都在路由表里实现)

import Vue from "vue";
import Router from "vue-router";
import Index from "@/components/index";//@默认为src目录
import News from "@/components/news";//@默认为src目录
Vue.use(Router);
export default new Router({
routes:[
{
path:"/",
name:"index",
component:Index
},
{
path:"/",
name:"news",
component:News
},
]
});

要将路由表挂载到主的vm对象中路由才能生效:

import Vue from 'vue'
import App from './App.vue'
import router from './router'//主要代码1
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
//import Vconsole from 'vconsole';
//Vue.prototype.$vConsole= new Vconsole()
import 'vant/lib/index.css';
//axios.defaults.baseURL = '../../../';//TODO 部署地址
axios.defaults.baseURL = '../**/';//TODO 开发地址
Vue.use(VueAxios,axios);
Vue.config.productionTip = false
new Vue({
router,主要代码2
store,
render: h => h(App)
}).$mount('#app')

2 嵌套路由:

在需求嵌套路由的路由表中添加children(注意path不能再写绝对路径,必须是相对路径)

例如:

import VueRouter from 'vue-router';
import Header from './components/header';
import Home from './components/home';
import News, {router as news_router} from './components/news';
export default new VueRouter({
routes: [
{
path: '/index',
name: 'index',
components: {
header: Header,
default: Home
}
},
{
path: '/news',
name: 'news',
components: {
header: Header,
default: News
},
children: [
{
path:'1',
component:{
template:'<div>1111</div>'
}
},
{
path:'2',
component:{
template:'<div>222</div>'
}
}
]
}
]
})

版权声明:本文为[alice--小文子]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/alice9999999/article/details/119421444