一、控制臺安裝vue路由
npm install --save vue-router@3.5.3 最新版本只支持vue3
二、項目src文件夾下創(chuàng)建router文件夾，并在router文件夾下創(chuàng)建index.js文件
三、在index.js文件夾下進行vue路由配置
//1.導(dǎo)入VueRouter
import Vue from "vue";
import VueRouter from 'vue-router'
// 引入路由組件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//2.使用路由
Vue.use(VueRouter);
// 把VueRouter原型對象push，保存一份
let originPush = VueRouter.prototype.push
let originReplace=VueRouter.prototype.replace
// 重寫push|replace
// 第一個參數(shù)：告訴原來的push方法，往哪里跳轉(zhuǎn)（傳遞哪些參數(shù)）
VueRouter.prototype.push = function (location, resolve, reject) {
if (resolve && reject) {
originPush.call(this, location, resolve, reject)
} else {
originPush.call(this, location, () => { }, () => { })
}
}
VueRouter.prototype.replace=function(location,resolve,reject){
if(resolve&&reject){
originReplace.call(this,location,resolve,reject)
}else{
originReplace.call(this,location,()=>{},()=>{})
}
}
//3.創(chuàng)建VueRouter的實例
const router = new VueRouter({
//tips:不想要 #（錨點）就添加下面代碼
mode: 'history',
//4.配置路由的path和組件
routes: [
{
path: "/home",
component: Home,
meta: { show: true }
},
{
path: "/search/:keyword",
component: Search,
meta: { show: true },
name: 'search',
},
{
path: "/login",
component: Login,
meta: { show: false }
},
{
path: "/register",
component: Register,
meta: { show: false }
},
// 重定向,在項目跑起來時，訪問/，定向到/home
{
path: '*',
redirect: "/home"
}
]
})
//5.導(dǎo)入路由實例
export default router
四、在main.js中注冊路由文章來源：http://www.zghlxwxcb.cn/news/detail-651975.html
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router/index'
Vue.config.productionTip = false
new Vue({
//注冊路由
router,
render: h => h(App),
}).$mount('#app')
五、在App.vue根組件組件使用文章來源地址http://www.zghlxwxcb.cn/news/detail-651975.html
<router-view></router-view>到了這里，關(guān)于vue2路由配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
