Vue2+vuerouter2+webpack construction Project Combat (V): Configure sub-routes

Objective

Through the previous chapters of the actual combat, we have successfully built the project, and from the API interface to obtain data and rendering out. Making more pages and more complex applications is something you have to adjust according to your own project.

This chapter describes how to configure sub-routes, because our projects cannot have only one page, but are made up of many pages.

New sub-routing page

In the second section, we created a new sub-page for Src/frame/subroute.vue. It was left blank at the time. Here, we fill it in with the following code:

<Template><Div><Divclass= "Main">    <ul>        <Li><Router-link: to= "{name: ' Userdefault '}">User Center Default</Router-link></Li>        <Li><Router-link: to= "{name: ' UserInfo '}">User Center Details</Router-link></Li>        <Li><Router-link: to= "{name: ' Userlast '}">User Center Settings</Router-link></Li>    </ul></Div><Div>    <Router-view></Router-view></Div></Div></Template><Script>Exportdefault{data () {return {                    }       }           }</Script>

New sub-page

We create a new folder under the Src/page folder user, and then create a new three files inside the Index.vue,info.vue and Set.vue. The code contents are as follows:

Index.vue Code:

< Template >  < Div >User index page</div></template> 

Info.vue Code:

< Template >  < Div >User Info page</div></template> 

Set.vue Code:

< Template >  < Div >User Set page</div></template> 

Configuring the Routes.js File

Open the Src/config/routes.js file, which is the file that configures all the routes. First, insert the following code at the top, referencing Zi Lu by the file

// introduce sub-route import Frame from '. /frame/subroute.vue '

Routes.js Complete code:

Import vue from ' Vue 'Import Router from' Vue-router '//introducing sub-routesImport Frame from '. /frame/subroute.vue '//referencing TemplatesImport index from '. /page/index.vue 'Import Content from‘.. /page/content.vue '//Introducing sub-pagesImport Userindex from '. /page/user/index.vue 'Import UserInfo from‘.. /page/user/info.vue 'Import Userset from‘.. /page/user/set.vue 'Vue.use (Router) exportdefault NewRouter ({routes: [{path:‘/‘, Component:index}, {path:'/content ', component:content}, {name:' User ', Path:'/user ', Component:frame, children: [{name:' Default ', Path: '/user/', redirect: '/user/userdefault '}, {name:' Userdefault ', Path: '/user/userdefault ', Component:userindex}, {name:' UserInfo ', Path: '/user/userinfo ', Component:userinfo}, {name:' Userlast ', Path: '/user/userlast ', Component:userset}],},]})

At the same time add a user Center entry in App.vue, the overall code:

<Template>  <DivID= "App">       <Divclass= "Nav-list">      <Router-linkclass= "Nav-item" to="/">Home</Router-link>      <Router-linkclass= "Nav-item" to= "/content">Content page</Router-link>      <Router-linkclass= "Nav-item" to= "/user">User Center</Router-link>    </Div>    <Router-view></Router-view>  </Div></Template><Script>Exportdefault{name:'app'}</Script><styleLang= "Scss">@import "./style/style";</style>

We go to the User Center default page:

If you click on User Center details, go to:

Reference

Reference Address: http://blog.csdn.net/fungleo/article/details/53213167

Vue2+vuerouter2+webpack construction Project Combat (V): Configure sub-routes