Vue second-level route setting method and vue setting method

Vue second-level route setting method and vue setting method

When using vue in the project, routes will be used, and the requirements for level-2 routing and even three-set routing are all just needed. Of course, the configuration method of multi-level routing is the same as that of level-2 routing, let's briefly talk about the configuration of level-2 routing.

First, prepare the structure of the first-level route:

<Router-link to = "/discover"> <div @ click = "clickFind ('discover ') "> <span class =" icon-find "> </span> <p> found </p> </div> </router-link> <router-link to = "/todayStudy"> <div @ click = "clickStudy ('learn today ') "> <span class =" icon-todayStudy "> </span> <p> today's learning </p> </div> </router-link> <router-link = "/listenAnyWhere"> <div @ click = "clickListen ('Listen to thing ') "> <span class =" icon-listenAny "> </span> <p> anytime </p> </div> </router-link> <router-link = "/bought"> <div @ click = "clickBought ('purchased ') "> <span class =" icon-areadyBy "> </span> <p> purchased </p> </div> </router-link> <router-link to = "/mine"> <div @ click = "clickMe"> <span class = "icon-me"> </span> <p> me </p> </div> </router-link> </div> <router-view> </router-view>

Introduce the module in main. js and configure the route:

import discover from './components/discover/discover.vue'; import todayStudy from './components/todayStudy/study.vue'; import listen from './components/listenAnyWhere/listen.vue'; import bought from './components/bought/bought.vue'; import mine from './components/mine/mine.vue'; 

const routes = [  {  path: '/',  redirect: '/discover'  },  {  path: '/discover',  component: discover  },  {  path: '/todayStudy',  component: todayStudy  },  {  path: '/listenAnyWhere',  component: listen  },  {  path: '/bought',  component: bought  },  {  path: '/mine',  component: mine  } ]; 

First view results

 

 

Click to listen to the book every day and enter the next level

 

Set a secondary route in main. js

import thisMouth from './components/discover/detailEveryDay/thisMouth/thisMouth.vue'; import four from './components/discover/detailEveryDay/fourth/fourth.vue'; import three from './components/discover/detailEveryDay/three/third.vue'; import two from './components/discover/detailEveryDay/two/second.vue'; import one from './components/discover/detailEveryDay/one/first.vue'; import twel from './components/discover/detailEveryDay/twe/twel.vue'; import elev from './components/discover/detailEveryDay/elven/elev.vue'; 

const routes = [  {  path: '/',  redirect: '/discover'  },  {  path: '/discover',  component: discover,  <span style="color:#ff0000;">children: [   {   path: '/',   component: thisMouth   },   {   path: '/thisMouth',   component: thisMouth   },   {   path: '/forthMouth',   component: four   },   {   path: '/thirdMouth',   component: three   },   {   path: '/secondMouth',   component: two   },   {   path: '/firstMouth',   component: one   },   {   path: '/elMouth',   component: twel   },   {   path: '/twMouth',   component: elev   }  ]</span>  }, 

Create the modules required for each route under the corresponding path.

 

The above vue second-level routing setting method is a small series of Content shared to everyone, I hope to give you a reference, but also hope you can support a lot of help homes.