Configuration of Vue routes

First, the preparatory work

1 installing vue-cli npm Install vue-cli-g

2 Check if the installation is successful vue-v ( capital V)

3 initializing a new project vue init webpack Vue-demo

go to the project directory npm install npm run dev

Second, configure the route

1 we can see that There is a index.js under the generated router folder

First, we'll start with a few new components, such as helloworld.vue \ Home.vue introduced in index.js . , the routing configuration is as follows index.js

Import Home from ' @/components/home ';
Vue.use (Router)

Export Default New Router ({

Mode: ' History ',
Routes: [
The route is displayed under the default path
{
Path: '/',
Name: ' HelloWorld ',
Component:helloworld
},{
Path: '/home ',
Name: ' Home ',
Component:home
}
]
})

Note: in the Router object that is created, if modeis not configured , thedefault hash mode is used, and the path is formatted as #! start.

Add Mode: ' History ' will then use the HTML5 history mode, which does not have a # prefix and can be used Pushstate and replacestate to manage records.

2app.vue as an ingress container for a component, where <router-view> is used to render components that are mapped over a route, and when the path changes,< The content in the router-view> also changes

There are two routes configured above, and when http://localhost:8080 or http://localhost:8080/home is turned on, the <router-view> Rendering in Home.vue components. Home is equivalent to the main interface of this page, the other pages are nested in this page, so there are dynamic changes in the place to have <router-view >, if there is a next-level page under the embedded Pages section, you need to nest level two routes in the first-level route and modify the router/index.js

1 routes: [2   //the route is displayed under the default path3   {4Path: '/',5Name: ' Home ',6 Component:home,7 children:[8{path: '/',9 Component:loginTen       } One     ] A   },{ -Path: '/hello ', -Name: ' HelloWorld ', the Component:helloworld -   } -]

After the configured route, add children and add a level two route to the children to enable routing nesting

When you configure path, the nested path beginning with "/" is treated as the root path, so the path of the child route does not need to be added "/"

Three using <router-link> mapping routes

We add a map route to the index page to invert it.

First We login in login plus a route jump, also known as programmatic navigation

this. $router. Push to modify the URLtocomplete the jump

Push can be either an object or a string:

The string this. $router. Push ('/home/first ')//object this. $router. Push ({path: '/home/first '})//named Route this. $router. Push ({Name : ' Home ', params: {userid:wise}})//The form of the parameter

　　

Then, enter indexpage, set twoRouter-link,after compiling,<router-link>will be rendered as<a>tags, towill be rendered ashref, when<router-link>when clicked,URLthere will be a corresponding change,If for allIDdifferent users, you have to use theHomecomponent to render, the index can be. jsAdd dynamic Parameters in:

this Routes such as "/home/user01","/home/user02","/home/user03" , etc., will be mapped to home Components

you can then use the $route. Params.id to get the corresponding ID

To jump to the parameter:

this. $router. Push ('/index/${. Username} ');

Parameter configuration for routing

{  path: '/index/:id ',  Component:index},

　　

The parameters received after the jump:

Created () {  this.usname = this. $route. Params.id;}

　　

Finally, write the routing jump router-link in Index.vue.

Import vue from ' Vue '
Import Router from ' Vue-router '
Import HelloWorld from ' @/components/helloworld ';
Import Home from ' @/components/home ';
Import Login from ' @/components/login ';
Import index from ' @/components/index ';
Import Register from ' @/components/register ';
Vue.use (Router)

Export default New Router ({
  Mode: ' History ',
  Routes: [
    The route is displayed under the default path
    {
      Path: '/',
      Name: ' Home ',
      Component:home,
      children:[
        {path: '/',
         Component:login
        },
        {
          Path: '/index/:id ',
          Component:index
        },
        {
          Path: ' Register ',
          Component:register
        }
      ]
    },{
      Path: '/hello ',
      Name: ' HelloWorld ',
      Component:helloworld
    }
  ]
})

　　

Post-run interface

OK, today's routing configuration and Jump are here, next time we continue the configuration of dynamic routing steps.

Configuration of Vue routes