20. Route nesting

1. What is route nesting

  • Embedded routines by, also known asZi lu by.
  • In practice, usuallyComposed of multiple layers of nested components.

2. The actual combat

  1. Create the user information component in theviews/userCreate a directory namedProfile.vueView component of:
<template> <h1> Personal information </h1> </template> <script> export default {name: "UserProfile"} </script> <style scoped> </style>Copy the code
  1. Create the user list component inviews/userCreate a directory namedList.vueView component of:
<template> <h1> </h1> <script> export default {name: "UserList"} </script> <style scoped> </style>Copy the code
  1. Modify theMain.vueHome page view, usedElement UILayout container components:
<template> <div> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title">< I class="el-icon-caret-right"></ I > User management </template> < el-menu-itemgroup >< el-menu-item index="1-1"> <! --> <router-link to="/user/profile"> Personal information </router-link> </el-menu-item> <el-menu-item index="1-2"> <! --> <router-link to="/user/list"> User list </router-link> </el-menu-item> </ el-menu-itemgroup > </el-submenu> <el-submenu index="2"> <template slot="title">< I class="el-icon-caret-right"></ I > Content management </template> <el-menu-item-group> <el-menu-item index="2-1"> Category Management </el-menu-item> <el-menu-item index="2-2"> Content list </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title">< I class="el-icon-caret-right"></ I > System management </template> <el-menu-item-group> <el-menu-item index="3-1"> User Settings </el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></ I >< el-dropdown-menu slot="dropdown"> <el-dropdown-item> Personal information </el-dropdown-item> <el-dropdown-item> Exit login </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <! <router-view /> </el-main> </el-container> </el-container> </div> </template> <script> export default {router-view /> </el-main> </el-container> </el-container> name: "Main" } </script> <style scoped> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style>Copy the code
  1. usechildrenconfigurationEmbedded routines by, modifyrouter/index.jsMain route configuration file:
/ / import vue
import Vue from 'vue';
import VueRouter from 'vue-router';
// Import components
import Main from ".. /views/Main";
import Login from ".. /views/Login";
// Import submodules
import UserList from ".. /views/user/List";
import UserProfile from ".. /views/user/Profile";

/ / use
Vue.use(VueRouter);
/ / export
export default new VueRouter({
  routes: [{/ / login page
      path: '/main'.component: Main,
      // Write to the submodule
      children: [{path: '/user/profile'.component: UserProfile,
        }, {
          path: '/user/list'.component: UserList,
        },
      ]
    },
    / / home page
    {
      path: '/login'.component: Login

    },
  ]
})
Copy the code

21. Parameter transfer

  • Vue-RouterPath problem in

We often need to map all the routes that a pattern matches to the same component.

For example, we have a User component that is used to render for all users with different ids. That’s where we need to pass the parameters.

Do not use the props

  1. Modify thesrc/router/index.jsRoute configuration:
  • Mainly in thepathAdd to property:idA placeholder
{
  path: '/user/profile/:id'.name: 'UserProfile'.component: UserProfile,
}
Copy the code
  1. Front-end transfer parameters:
  • inMain.vueTo givetoBinding objectsv-bind:toor:to(:isv-bindThe omitted)
  • router-linkIn thenameAttribute names must be andThe routing configurationIn thenameThe attribute namematchingBecause of thisVueThe corresponding routing path can be found.
  • usingparamstoPassing parameters.
<! <router-link v-bind:to="{name: 'UserProfile', params: {id: 123}}"> </router-link>Copy the code
  1. The target componentProfile.vueTo receive the parameters and display them in the view:
<template> <div> <h1> Personal information </h1> {{$route.params.id}} </div> </template <script> export default {name: "UserProfile" } </script> <style scoped> </style>Copy the code

{{$route.params.id}} {$route.params.id}}

  1. Have a tryhttp://localhost:8080/#/user/profile/123:

The use of props

  1. Modify thesrc/router/index.jsAdded route configurationprops:trueProperties:
{
  path: '/user/profile/:id'.name: 'UserProfile'.component: UserProfile,
  props: true,}Copy the code
  1. The target componentProfile.vueThere are some changes in the way parameters are received in:
<template> <div> <h1> Personal information </h1> {{id}} </div> </template> <script> export default {name: "UserProfile", // Pass parameter props: ['id'] } </script> <style scoped> </style>Copy the code
  1. Have a tryhttp://localhost:8080/#/user/profile/123456:

Examples of the demo

demand

  • After successful login, the user name is displayed in the upper right corner of the home page

implementation

  1. Login.vuethemethodsTo obtain the current user name:
Methods :{onSubmit(formName){this.$refs[formName].validate((valid)=>{if(valid){/* Get the user name */ this.$router.push("/main"+"/"+this.form.username); }else { this.dialogVisible=true; return false; }}); }}Copy the code
  1. Modify thesrc/router/index.jsRouting configuration,/mainRouting to receivenameParameters:
{
	path: '/main/:name'.component: Main,
	props: true,}Copy the code
  1. Main.vueReceive parameters,
<script>
  export default {
    name: "Main",
    props: ['name'],
  }
</script>
Copy the code

And then show the data,

</el-dropdown>
  <span>{{name}}</span>
</el-header>
Copy the code
  1. Try the effect:

Component redirection

  • Redirect, as the name suggests.
  • butVueIn theredirectisApplies when paths are different but components are the same.
  1. Modify thesrc/router/index.jsRoute configuration: Added redirected routesredirectProperties:
/ / redirection
}
  path: '/goLogin'.redirect: '/login'
},
/ / login page
{
  path: '/login'.component: Login
},
Copy the code

Description:

Two paths are defined here, one is /login and the other is /goLogin, where /goLogin redirects to /login, so you can see that redirection does not require component definition.

  1. Main.vueRedirected routing component in:
<el-menu-item index="1-3"> <! -- Component redirection --> <router-link to="/goLogin"> Return to login page </router-link> </el-menu-item>Copy the code
  1. Refresh the page and click “Back to Login page” to try

23. Routing Mode

There are two routing modes:

  • hash:
    • Path to take#symbol
    • Such ashttp://localhost/#/login
  • history:
    • Path does not take#symbol
    • Such ashttp://localhost/login

Modifying Route Configurations

  • In our routing configuration filesrc/router/index.jsTo specify the routing modemode:
export default new Router({
  mode: 'history'.routes: []});Copy the code

24, 404

  1. newsrc/views/NotFound.vue:
🤣</h1> </div> </template> <script> export default {name: "NotFound" } </script> <style scoped> </style>Copy the code
  1. In the routing profilesrc/router/index.jsTo configure the route:
// Import components
import NotFound from ".. /views/NotFound.vue";

routes: [
  {
    path: "*".component: NotFound
  }
]
Copy the code
  1. Try to accesshttp://localhost:8080/#/abv:

Use the history routing mode, go to http://localhost:8080/abv.