A by pass to the navigation routing parameter name attribute
Red font additions and changes to the content! ! !
1, the new src / router.js
2、src/main.js
// Import vue and new router.js
Import view from 'View'
import router from './router.js'
3、src/router.js
// Import and vue vue-router
Import view from 'View'
import VueRouter from 'vue-router'
// use vue-router (named VueRouter, you can easily take)
Vue.use (VueRouter)
// define template component content
const first = {template: '<div> This is the first contents </ div>'}
const second = {template: '<div> This is the second contents </ div>'}
const Home = {template: '<div> This is the Home content </ div>'}
const firstFirst = {template: '<div> This is firstFirst contents </ div>'}
const firstSecond = {template: '<div> This is the FIRST SECOND contents </ div>'}
const sld={
template:`
<div class="sld">
<H2> two components </ h2>
<router-view class="abc"></router-view>
</div>
`
}
// define the component path
const router = new VueRouter({
mode:"history",
base:__dirname,
routes:[ //routes
{path:"/",
name:"Home",component:Home},
{path:"/first",component:sld,
children:[
{path:"/",
name:"Home-first",component:first},
{path:"first",
name:"Home-first-first",component:firstFirst},
{path:"second",
name:"Home-first-second",component:firstSecond}
]
},
{path:"/second",
name:"Home-second",component:second}
]
})
// use the component
new view ({
router,
template:`
<div id="r">
<p>{{$route.name}}</p>
<ul>
// router-link to = "path to the assembly"
<li><router-link to="/">/</router-link></li>
<li><router-link to="/first">first</router-link>
<ul>
<li><router-link to="/first/first">first</router-link></li>
<li><router-link to="/first/second">second</router-link></li>
</ul>
</li>
<li><router-link to="/second">second</router-link></li>
</ul>
<router-view class="abc"></router-view>
// router-view assembly display region
</div>
`
}). $ Mount ( "# app") // components mounted div (index.html defined in the id app)
4, run npm run dev, page display effect
Two, router-link to give the sub-assembly in the template parameter passing
Red box for the additions and changes to the content! ! !
const firstFirst = {template: '< div> This is firstFirst content route.params.id $}} {{</ div>' }
const FIRST SECOND = {Template: '<div> FIRST SECOND content which is {{$ route.params .id}} </ div> ' }
<li><router-link :to="{name:'Home-first-first',params:{id:111111}}">first</router-link></li>
<li><router-link :to="{name:'Home-first-second',params:{id:222222}}">second</router-link></li>