Code for VUE multi-layer route nesting and vue multi-layer route nesting

Code for VUE multi-layer route nesting and vue multi-layer route nesting

Let's take a look:

For example, the home page has two functions: home and news. The home page is divided into logon and registration.

First, you need to extract various templates. Define Template

<Template id = "home"> // home template, including sub-views <div> <router-link to = "/home/login"> logon </router-link> <router-link to = "/home/zhuce"> register </router-link> <router-view> </div> </template> <template id = "news"> // message template <div> news </div> </template> <template id = "login"> // logon under the home template <div> this is login </div> </template> <template id = "zhuce"> // register under the home template <div> this is zhuce </div> </template>

Configure routes under JS

Const home = {template: "# home"}; const news = {template: '# News'}; const login = {template:' # login '}; const zhuce = {template: '# zhuce'}; var rout = [{path: '/', redirect: '/home'}, // redirect to home, when the hash value after html is empty, the default display is home {path: '/home', component: home, // template registration redirect:'/home/login ', // subview redirection Default login children: [{path: '/home/login', component: login}, // configure sub-template {path: '/home/zhuce', component: zhuce}]}, {path: '/News', component: news}]; var router = new VueRouter ({// instantiate a vuerouter routes: rout}); const app = new Vue ({router }). $ mount ('# app ')

When the Vue instance does not have the el attribute, the instance is not mounted to a dom;

If you need to delay mounting, You can manually call the vm. $ mount () method later.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.