在使用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.

Logo

前往低代码交流专区

更多推荐