• This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hash pattern

Vue-router defaults to hash mode — the hash of a URL is used to simulate a full URL so that the page does not reload when the URL changes.

The history mode

If you don’t want ugly hashes, you can use the history mode of the route, which takes full advantage of the history.pushState API to do URL jumps without reloading the page. In route configuration:

VueRouter({
  mode: 'history',})Copy the code

When you use history mode, urls look just like normal urls, such as yoursite.com/user/id, and look good too!

However, this mode to play well, but also need background configuration support. Because our application is a single-page client, if the background is not properly configured, when the user accesses OURSITE.COM directly from the browser, it will return 404, which is not pretty.

So, you add a candidate resource on the server that covers all cases: if the URL doesn’t match any static resource, it should return the same index.html page that your app relies on.

VueRouter_ Named Route – Nested route – Redirect – Alias

After routing

When creating a Router instance, you can set the name of a route in the Routes configuration:

routes = [
  {
    path: '/activity/personal'.name: 'personal'.component: Personal,
  }
];
Copy the code

To link to a named route, pass an object to router-link’s to property:

<router-link :to="{ name: 'personal' }">Personal center</router-link>
Copy the code

Embedded routines by

When a component rendered by a router-view wants to include its own nested router-view, it can use nested routines, such as:

{
  path: '/activity'.component: () = > import('./views/Activity'),
  children: [{path: '/activity/academic'.name: 'academic'.component: () = > import('./views/Academic'),}, {path: '/activity/personal'.name: 'personal'.component: () = > import('./views/Personal'),}, {path: '/activity/download'.name: 'download'.component: () = > import('./views/Download'),}],}Copy the code

With this setup, you can use router-view in your Activity component. The path of a child path can be abbreviated:

path: 'personal'
Copy the code

This will automatically join the parent route path before the child route, the final result is: /activity/personal.

When accessing other paths under /activity, nothing is rendered. If you want to render something, you can provide an empty route:

{
  path: '/activity'.children: [{path: ' '.component: () = > import('./views/Academic'),},],}Copy the code

redirect

Redirection is also done using the Routes configuration, as shown in the following example redirecting from /a to /b

const router = new VueRouter({
  routes: [{path: '/a'.redirect: '/b'}]})Copy the code

The redirection target can also be a named route:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: { name: 'foo'}}}])Copy the code

Or even a method that dynamically returns a redirected target:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: to= > {
       // The method receives the destination route as an argument
       // Return redirects the string path/path object}}}])Copy the code

The alias

“Redirect” means that when the user accesses /a, the URL will be replaced with /b, and then the route will be matched with /b. What is the “alias”?

The alias for /a is /b, which means that when a user accesses /b, the URL remains /b, but the route matches/A, just as if the user accesses /a.

The route configuration is as follows:

const router = new VueRouter({
  routes: [{path: '/a'.component: A, alias: '/b'}]})Copy the code

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤