vue routing -- the most basic use steps, nested routing

Keywords: Vue IE

Use steps of Vue router

1. Introduction

<script src="./vue-router.js"></script>

2. Install the plug-in (Vue. Use (plug-in object); / / some global components will be registered and properties will be attached to the VM or component object during the process.)

Vue.use(Router)

3. Create route instance

var Router = new VueRouter({routes:[{...}]})

4. Configure routing rules

 routes[{path:"/xxx",component: component name}]

5. Associate the object with Vue Vue instance, add Router: router

new Vue({
    el:"#app",
    router:router,// If you do not add this step, you will not get matched in the object
    components:{
        "app":App
    },
    template:`<app/>`
})

6. Leave a pit < router View > < router View > to specify the local variable of route change

var App = {
    template:`
        <div>
            <router-view></router-view>
        </div>
        `
}

Simple demo

View routes by modifying address bar anchor values

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='../node_modules/vue/dist/vue.js'></script>
    <!-- 1,Introduce vue-router -->
    <script src="./vue-router.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        var Login = {
            template:`
            <div>I am the login interface</div>
            `
        }
        var Register = {
            template:`
            <div>I am the registration page<div>
            `
        }

        //2. Install plug-ins
        Vue.use(VueRouter);
         // 3. Create a routing object
         var router = new VueRouter({
             //4. Configure routing objects
             routes:[{path:'/login', component:Login}]
         });
         
         // 6. Specify the local variable of route change
        var App = {
            template:`
                <div>
                    <router-view></router-view>
                </div>
                `
        }

         // 5. Associate the configured routing object with the value vue instance
         new Vue({
             el:"#app",
             router:router,// If you do not add this step, you will not get matched in the object
             components:{
                 "app":App
             },
             template:`<app/>`
         })

    </script>
</body>
</html>

Nested Route

routes:[
	{
		name:'',
		path:'',
		component:xxx,
		children:[
			{
				name:'',
				path:'',
				component:xxx
			 }
		]
	 }
]

Nested route demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='../node_modules/vue/dist/vue.js'></script>
    <!-- 1,Introduce vue-router -->
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        var Man = {
            template:`<div>Welcome to log in...</div>`
        }
        var Woman = {
            template:`<div>Welcome to login...</div>`
        }
        // 1: Router view includes router view
        // 2: Sub rule in routing rule
        var Login = {
            template:`
                <div>
                    //I am the content of login display. The following is the content of sub route display
                    <router-view ></router-view>    
                </div>`
        }
        var Register = {
            template:`<div>
                    //I am the content of login display. The following is the content of sub route display
                    <router-view></router-view>    
                </div>`
        }
        // Install plug-ins
        Vue.use(VueRouter);
        // Create a routing object
        var Router = new VueRouter({
            // Configure routing rules
            routes:[
                // A routing object with a name is equal to a variable name. Router link only needs to specify the variable name
                {
                    // Ensure that login displays the login component
                    name:"login", path:"/login", component:Login,
                    // Ensure that / login/woman displays abc
                    children:[
                        {name:"login.woman", path:"woman", component:Woman},
                        {name:"login.man", path:"man", component:Man}
                    ]

                },
                {name:"register",path:"/register", component:Register}
            ]
        })

        var App = {
            template:`
                <div>
                   <router-link :to="{name:'login.woman'}">Female login please click</router-link>     
                   <router-link :to="{name:'login.man'}">Please click for men's landing</router-link>     
                   <router-view></router-view>
                </div>`
        }

        new Vue({
            el:"#app",
            // Using routing
            router:Router,
            components:{
                app:App
            },
            template:`
             <app/>
            `
        })
    </script>
</body>
</html>

kingsha.

Published 28 original articles, praised 0, visited 1528

Private letter follow

Posted by phuggett on Mon, 20 Jan 2020 08:41:27 -0800

Programmer Group

vue routing -- the most basic use steps, nested routing

Use steps of Vue router

Simple demo

Nested Route

Nested route demo

Hot Keywords