前面一篇学习了路由功能的配置,本文就进一步学习路由的使用。
新增一个页面
在components目录下新建vue文件“FirstPage.vue”,其内容如下:
<template>
<div>
<h1>添加的第一个页面</h1>
</div>
</template>
<script>
export default {
name: 'FirstPage'
}
</script>
<style scoped>
h1{
color: red;
}
</style>
这个界面很简单,就一行字。
路由实现
根据上篇讲的思路,新增的页面得在路由里配置,否则他没法管理,很简单,就按照原来的模板加一个就好了:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import FirstPage from '@/components/FirstPage'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
// 新加以下一个内容
{
path: '/FirstPage', // 新增页面的路径
name: 'FirstPage',
component: FirstPage,
}
]
})
添加链接
现在的实现是,在首页里,有一个链接,点一下就跳转到这个新增的页面里来。所以我们得在首页先增加这么一个链接:
<template>
<div class="hello">
<router-link to="/FirstPage"> <!-- 这个to后面的内容,一定要和router里面的path一模一样,他就是根据这个地址映射过去的-->
<span>
测试第一个网页
</span>
</router-link>
<h1>{{ msg }}</h1>
其实就是在第三行开始加了个<router-link>,都是router提供的功能。
其他内容按照上一篇的配置,然后访问如下
那么点击那个链接:
可以看到网址后面就是我们路由里新配置的地址。说明成功了。
只是这个大图标怎么还在?其实是因为这个图标的是App.vue引入的,属于最上层,所以即使是新页面也只是在他下面修改内容,无法修改最上层的内容。要去掉这个图标就把引入这个图标的代码改到去HelloWorld.vue里面引用就好了,这样就知道首页显示了。
有前面的基础,这一步也变得简单了。
路由到新的页面
上面路由可以发现其实还是在原来的页面上,会覆盖掉原来的内容,那么想打开一个新的页面是怎么样呢?只需要加一个参数即可:
<template>
<div class="hello">
<img alt="Vue logo" src="../assets/logo.png">
<router-link target="_blank" to="/FirstPage">
<span>
测试第一个网页
</span>
</router-link>
<h1>{{ msg }}</h1>
就是在<router-link>上加参数:target="_blank"。这样路由到这个界面时就是在新的页面打开了