通过别名导航到路由器时，如何将URL更改为路径？

debugcn 发表于 Dev

尼克·马纳林（Nicke Manarin）

当用户使用路线的别名导航到页面时，URL与别名保持在一起，并且页面正确呈现。

path用户导航到别名时，如何更改为的URL ？

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/404",
    name: "404",
    alias: "*",
    component: () => import(/* webpackChunkName: "NotFound" */ "@/views/NotFound.vue")
  },
  {
    path: "/",
    name: "Home",
    alias: "/home",
    component: Home
  },
  {
    path: "/downloads",
    name: "Downloads",
    alias: ['/download', '/releases'], 
    component: () => import(/* webpackChunkName: "Downloads" */ "@/views/Downloads.vue")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

例如：

用户类型www.example.com/home。
浏览器加载Home页面页面。
网址已更改为“ www.example.com/”。

其他：

用户类型www.example.com/lalallaa。
浏览器加载NotFound页面页面。
网址已更改为“ www.example.com/404”。

做到这一点的最佳方法是什么？我只能考虑created()在每个页面上使用事件并手动设置URL，但是我不确定这是否是最佳方法。

菲尔

您需要的是重定向，而不是别名。

设置您想要的已知重定向

/home => /
/download和/releases=>/downloads

然后/404在该routes数组的末尾添加一个包罗万象的重定向。

const router = new VueRouter({
  routes: [{
    path: '/404',
    component: { template: `<h1>404</h1>` }
  }, {
    path: '/',
    component: { template: `<h1>Home</h1>` }
  }, {
    path: '/home', redirect: '/'
  }, {
    path: '/downloads',
    component: { template: `<h1>Downloads</h1>` }
  }, {
    path: '/download', redirect: '/downloads'
  }, {
    path: '/releases', redirect: '/downloads'
  }, {
    path: '*', redirect: '/404'
  }]
})

new Vue({
  el: '#app',
  router
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div id="app">
  <ul>
    <li><router-link to="/home">/home</router-link></li>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/downloads">/downloads</router-link></li>
    <li><router-link to="/download">/download</router-link></li>
    <li><router-link to="/releases">/releases</router-link></li>
    <li><router-link to="/lalallaa">/lalallaa</router-link></li>
  </ul>
  <router-view></router-view>
  <pre>$route.fullPath = {{ $route.fullPath }}</pre>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。