前端路由的設定：
Vue2路由（vue-router3）
安裝插件 npm i vue-router@3
router/index.js檔案設定
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
//創建路由器實體
const router = new VueRouter({
mode: 'hash',
routes: [{}]
})
export default router
main.js檔案設定
import router from “./router ”
new Vue({
Render:h=>h(App),
router
}).$mount(“#app”)
組件中的應用
頁面顯示
<router-view></router-view>
路由跳轉：
<router-link to=”/home”></router-link>
或者使用編程式導航，this.$route.push/this.$route.replace
兩者區別是，前者有history，后者沒有，
編程式導航攜帶可以攜帶query或者params引數
Vue3路由（vue-router4）
安裝插件 npm i vue-router
router/index.ts檔案設定
// 引入創建路由物件的函式
import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";
let router = createRouter({
history:createWebHashHistory(),
routes:[{
path:"/register",
component:()=>import("../pages/register/Register.vue")
},{
path:"/login",
component:()=>import("../pages/login/Login.vue")
}]
})
export default router
main.ts檔案設定
import router from './router';
app.use(router)
vue3路由跳轉：
setup函式中沒有this，vue2的方法不可用，使用useRouter函式
// 獲取路由物件的函式
import { useRouter } from "vue-router"
let $router = useRouter()
const gohome = ()=>{
$router.push({
path:"/home"
})
路由元資訊：
meta可以將任意資訊附加到路由上，如過渡名稱、誰可以訪問路由等，這些事情可以通過接收屬性物件的meta屬性來實作，
const routes = [
{
path: '/posts',
component: PostsLayout,
// 只有經過身份驗證的用戶才能創建帖子
meta: { requiresAuth: true }
]
}
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546242.html
標籤：其他
下一篇：【JavaScript UI庫和框架】上海道寧與Webix為您提供用于跨平臺Web應用程式開發的JS框架及UI小部件