A template out of

We’ve already looked at another form of Vue template definition, using
.

    <! -- Template removed -->
    <template id="home">
        <div>Home page</div>
    </template>

    <template id="news">
        <div>news</div>
    </template>
Copy the code

Then the route component is defined in js:

        // 1. Define (routing) components.
        const Home = { template: '#home' };
        const News = { template: '#news' };
Copy the code

Nested routing

The actual application interface is usually composed of several layers of nested components. For example, in our “home” component, there are also nested “login” and “register” components, so the URL corresponds to /home/login and /home/reg.

    <template id="home">
        <! -- Note: Components can only have one root element, so we wrap it inside this div -->
        <div>
            <h2>Home page</h2>
             <router-link to="/home/login">The login</router-link>
            <router-link to="/home/reg">registered</router-link>
            <! -- Routing matching components will be rendered here -->
            <router-view></router-view>
        </div>
    </template>
Copy the code

This is the template after accessing /home, where we need to render in /home/login and /home/reg. After completing the above code, the HTML structure is shown as follows:

Log in and register two components

    <template id="login">
        <div>Login screen</div>
    </template>
    <template id="reg">
        <div>The registration screen</div>
    </template>
Copy the code
// Define the routing component
const Login = { template: '#login' };
        const Reg = { template: '#reg' };
Copy the code

Define the routing

        // 2. Define a route
        const routes = [
             { path: '/'.redirect: '/home' },
            { 
                path: '/home'.component: Home, 
                children:[
                    { path: '/home/login'.component: Login},
                    { path: '/home/reg'.component: Reg}
                ]
            },
            { path: '/news'.component: News}
        ]
Copy the code

Note that we configured its children in the home route. This is nesting.

4. All codes of the case are as follows:

<! DOCTYPEhtml>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body> 
    <div id="box">
        <p>
            <router-link to="/home">home</router-link>
            <router-link to="/news">news</router-link>
        </p>
          <router-view></router-view>
    </div>

    <! -- Template removed -->
    <template id="home">
        <! -- Note: Components can only have one root element, so we wrap it inside this div -->
        <div>
            <h2>Home page</h2>
             <router-link to="/home/login">The login</router-link>
            <router-link to="/home/reg">registered</router-link>
            <! -- Routing matching components will be rendered here -->
            <router-view></router-view>
        </div>
    </template>

    <template id="news">
        <div>news</div>
    </template>

    <template id="login">
        <div>Login screen</div>
    </template>
    <template id="reg">
        <div>The registration screen</div>
    </template>

    <script type="text/javascript">
        // 1. Define (routing) components.
        const Home = { template: '#home' };
        const News = { template: '#news' };

        const Login = { template: '#login' };
        const Reg = { template: '#reg' };

        // 2. Define a route
        const routes = [
             { path: '/'.redirect: '/home' },
            { 
                path: '/home'.component: Home, 
                children:[
                    { path: '/home/login'.component: Login},
                    { path: '/home/reg'.component: Reg}
                ]
            },
            { path: '/news'.component: News}
        ]

        // 3. Create a router instance and pass the 'routes' configuration
        const router = new VueRouter({
            routes // routes: routes
        })


        // 4. Create and mount root instances.
        // Remember to inject the route with the router configuration parameter,
        // Make the entire application routable
        const app = new Vue({
          router
        }).$mount('#box')

        // Now the application is started!
    </script>
</body>
</html>
Copy the code