如何写VUE页面之间的路由？

在使用vue框架开发前端页面时，可以使用路由替我们解决很多交互体验的问题，比如页面某一区域需要局部刷新，虽然有一部分人选择使用v-show或是v-if来进行实现，效果固然可以达到，但是并不能体现出vue的强大功能之处，接下来，我简单入门的介绍如何写页面之间的路由。

一、路由的安装

我们需要使用路由，就需要先安装路由，安装命令如下：

cnpm install  vue-router –save-dev

二、路由的引入 

安装完路由之后，需要将路由引入到页面当中，需要先进行注册之后才能使用。这里在main.js中引入并注册，如下：

import Vue from 'vue'
import App from './App'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

new Vue({
    //上面配置了路由这里需要实例化里面使用才生效
    router, 
    el: '#app',
    components: { App },
    template: '<App/>'
})

 

 三、路由的使用

引入路由完成之后，就可以对需要的组件使用路由，首先确定哪个页面需要使用路由，这里演示一级路由以及二级路由。

1、我们打开页面时默认加载的页面为以下页面App.vue（这里演示一级路由写法）：

<template>
    <div id="app">
        <!-- 导航区 -->
        <ul>
          <li><router-link to="/">主页</router-link></li>
          <li><router-link to="/test1">路由页面1</router-link></li>
        </ul>
        <!-- 路由页面显示区 -->
        <router-view></router-view>
    </div>
</template>
export default {
  name: 'App'
}
</script>

 

2、接下来需要写需要路由的页面，默认的打开页面这里为HelloWord.vue，如下：

<template>
    <div>
        <!-- 这里是主页，页面打开时自动显示该页面 -->
        <h1>我是主页面</h1>
    </div>
</template>

 

3、路由页面1的组件如下test1.vue，同时这里也演示二级路由。

<template>
    <div>
        <ul>
          <li><router-link to="/test1/test11">test1页面中的二级路由</router-link></li>
        </ul>
        <router-view></router-view>
    </div>
</template>

 

4、test1页面中的二级路由test11.vue页面，如下：

 

<template>
    <div>
        <h>我是test1页面中的二级路由页面</h>
    </div>
</template>

 

5、路由的配置，这一点非常关键，vue在组件创建时会根据该配置信息进行对应组件的渲染。 这里在main.js里面配置一级路由和二级路由。

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

//一级路由
import HelloWord from './components/HelloWord'
import test1 from './components/test1'
//二级路由
import test11 from './components/test1/test11'

Vue.use(VueRouter)

//配置路由
const router = new VueRouter({
    routes: [
        //component:指的是组件的名字，还需要引入该组件，这里的表示根路径
        { path: "/", name: "helloWordLink", component: HelloWord }, 
        {
            path: "/test1",
            name: "test1Link",
            component: test1,
            children: [ //test1中的二级路由
                { path: "/test1/test11", name: "test11Link", component: test11 }
            ]
        },
        { path: "/test2", name: "test2Link", component: test2 }
    ],
    mode: "history" //作用是为了消除url中后面的/#/
})

new Vue({
    //上面配置了路由这里需要实例化里面使用才生效，
    router, 
    el: '#app',
    components: { App },
    template: '<App/>'
})

 

6、介绍到这里，页面之间的路由就已经写好了。现在可以到页面进行访问，不会发现路由可以达到<a>元素的效果，但是比<a>元素交互性更好，页面局部刷新选择这种路由方式最好。不建议使用v-show或是v-if.