Configuration of first-level routing in Vue

1. Introduce the vue-router.js library

2. Create the modules (components) required for routing:

Use the Vue.extand() method to create a module (component), which is used when writing separately; the co-written code is as follows, and the component is written directly in component→template

Allocate routing paths

//合写
<script>
    var vm=new Vue({
        el:'#box',
        data:{},
        //添加路由的配置项
        //router:路由对象（实例）
        //router:new VueRouter()

        //设置路由对象的配置项
        /*new VueRouter({
            路径信息：路径信息盛放在数组中
            routes:[
                {path:'分配的url路径'，component:'组件名'}
            ]
        })
        */
        router:new VueRouter({
            routes:[
                {path:'/home',component:{
                    template:'<h2>首页</h2>'
                }},
                {path:'/news',component:{
                    template:'<h2>新闻</h2>'
                }},
                {path:'/hot',component:{
                    template:'<h2>热点</h2>'
                }},
            ]
        })
    })
</script>

//分写，相对常用
<script>
    //1、准备路由所需的模块（组件）
    //全局Vue下，有extend()，用来注册路由所需的模块（组件）
    var Home=Vue.extend({
        template:'#home'
    });

    var News=Vue.extend({
        template:'#news'
    });

    var Hot=Vue.extend({
        template:'#hot'
    });

    var arr=[
        {path:'/home',component:Home},
        {path:'/news',component:News},
        {path:'/hot',component:Hot}
    ];

    var router=new VueRouter({
        routes: arr
    });

    var vm=new Vue({
        el:'#box',
        data:{},
        router:router
    })

    //路由重定向
    //push():路由对象自带方法，进行路由跳转push('url')
    router.push('/home')
</script>

3. Change the HTML structure

Use <router-link></router-link> tags instead of HTML <a></a> tags, the to attribute is used to set the address of the route jump

Use <router-view></router-view> for placeholder display

<div id="box">
        <ul>
            <li><router-link to='/home'>home</router-link></li>
            <li><router-link to='/news'>news</router-link></li>
            <li><router-link to='/hot'>hot</router-link></li>
        </ul>

        <div class="show">
            <router-view></router-view>
        </div>
    </div>

The effect is as follows (the effect after clicking home and news respectively)

4. The redirection of the route is to redirect to a module (component/URL) after refreshing

When writing, use the router's push('url') directly

//即为上面路由配置的合写代码中最下面的写法
//路由重定向push():路由对象自带方法，进行路由跳转push('url')
    router.push('/home')

When co-writing it, it should be written in the hook function, using $router.push('url')
```
beforeCrate:function(){
    this.$router.push('/home')
}
```

Configuration of first-level routing in Vue

Guess you like