第一步,下载vue-router
yarn add vue-router
第二步,main.js 入口:需要配置下
import Vue from 'vue'
import App from './App.vue'
// ***** 引入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 导入组件 @ 默认为src路径
import Layout from '@/views/Layout'
import Home from '@/views/Home'
import Search1 from '@/views/Search'
import Play from '@/views/Play'
//导入404组件
import P404 from './views/404.vue' //P404位置是变量名,不能为404
//****** vant 组件
import {
Tabbar,
TabbarItem,
NavBar
} from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(NavBar);
// ***************** 导入axios,设置基础路径
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'
Vue.prototype.$axios = axios
// 创建路由规则数组。及引入组件
const routes = [
// 一级路由 重定向
{
path: '/',
redirect: '/layout'
},
{
//路由
path: '/layout',
// 组件 注意组件名不带引号
component: Layout,
//二级路由 (二级路由有多个时需要再重定向)
redirect: '/layout/home',
//二级路由 children
children: [
{
path: 'home',
component: Home
},
{
path: 'search',
component: Search1,
}
]
},
{
path: '/play',
name:'playOne' //别名,当路径pat原有名字太长时.可以用别名
component: Play,
},
// 写在最后:找不到路由地址 -----> 404路径
{
path: "*",
component: R404
}
]
//实例化对象 router
const router = new VueRouter({
routes,
// 历史模式:没有#
// hash路由例如: http://localhost:8080/#/home
//history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)
// mode: "history" //打包上线后需要后台支持,
})
Vue.config.productionTip = false
new Vue({
router, //挂载到vue上,不要忘了这一步
render: h => h(App),
}).$mount('#app')