Vue router nested route

Posted by walter8111 on Thu, 30 Apr 2020 22:26:49 +0200

1, Foundation

install

$ npm install vue  //Install vue
$ npm install vue-router //Install Vue router

Or quote < script >

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

I'm referring to script directly in HTML here

Catalog

index.html
app.js

//index.html file
<body>
  <div id="app">
    <div>
      <!-- Use router-link Components to navigate. -->
      <router-link to="/foo">home page</router-link>
      <router-link to="/bar">about</router-link>
      <router-link to="/user/Wang Ma">Wang Ma</router-link>
      <router-link to="/user/gossip" tag="li">gossip</router-link>
    </div>
    <div>
      <!-- Route exit -->
      <router-view></router-view>
    </div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="app.js"></script>
</body>

Router link: it will be rendered as a < a > tag by default
To: attribute specifies the link. (corresponds to path)
Tag: modify the router link tag
router-view: route rendering

Define (route) components.


const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Bar1 = { template: '<div>My name is{{$route.params.name}}</div>' }
//You can also import from other files
//$route.params parameter + name after

2. Define route

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '/user/:name', component: Bar1 }
    // Dynamic path parameters start with a colon
]

path: address of the route (corresponding to to)
Component: component

Create router instance, and then transfer it to routes configuration

// You can also pass other configuration parameters, but it's so simple first.
const router = new VueRouter({
    routes   // (abbreviation) equivalent to routes: routes
})

Create and mount root instances.

// Remember to inject routes through router configuration parameters,
// So that the whole application has routing function
 new Vue({
   el:'#app',
    router
})

2, Child route (nested route)

//Define components
const Bar1 = {
    template: `
        <div>
            <div>My name is{{$route.params.name}}</div> 
            //Router link of sub route 
            //append adds a base road before the current path (a more is appended to the current address)
            //Equivalent to / user/:name/more
            <router-link to = "more" append>More information</router-link> 
            <router-view></router-view> //Sub route rendering
        </div>`
}
const Bar2 = {
    template: `
    <div> User: {{$route.params.name}}
         <p>{{$route.params.name}}It's a whore</p>
    </div>`
}
---------------------------------------------------------
//Define route
const routes = [{
   {
        path: '/user/:name', component: Bar1,
      //children are used to nest routes, which can be nested in multiple layers.
        children: [{
            path: 'more',
            component: Bar2,
        }]
    }
}]

Child route.gif

This article references Official website

Topics: Vue npm Attribute

Programmer Think

Vue router nested route

1, Foundation

2, Child route (nested route)

Hot Topics