接上篇《15.父子组件主动获取数据和方法、非父子组件获取数据和方法》
上一篇我们讲解了非父子组件如何进行数据和方法的传递,本篇我们来继续学习vue中的路由以及默认路由跳转。
本系列博文使用的Vue版本:2.6.11
一、什么是路由
我们之前开发的组件中,有两个子组件,App.vue的根组件,挂载了这两个子组件,并通过自定义标签引用了它们:
<template>
<!-- vue的模板里面,所有的内容都需要被一个根节点包裹起来 -->
<div id="app">
<h2>{{msg}}</h2>
<v-hello></v-hello>
<br/><hr/>
<v-news></v-news>
</div>
</template>
<script>
import Hello from './components/HelloWorld.vue'
import News from './components/News.vue'
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
},
components:{
'v-hello':Hello,
'v-news':News
}
}
</script>
<style>
</style>
关系图:
上面分别引用了首页以及新闻页两个子组件。这都是我们手动去做的。
而路由则是可以满足让根组件自动去挂载下面的子组件,例如我们需要实现点击那个组件,就自动挂载那个组件,点击另一个,就把上一个组件卸载,挂载这个组件,这里就需要使用到“路由”的机制。
按照官方的解释,Vue的路由允许我们通过不同的URL访问不同的内容,可以实现多视图的单页Web应用(single page web application,SPA)。
这里的单页面我们可以理解为,使用一个主页面,就可以通过链接自由变换页面的内容(注意是内容,不是直接刷新页面,类似于异步更新组件)。
下面我们通过实例实现一个路由的机制。
二、如何使用路由
在Vue中为我们提供了一个“vue-router”的插件,该插件就可以帮我们实现路由的效果。
如何使用呢?我们来看一下。
1、安装并引入vue-router
首先我们在项目下使用npm install指令来安装vue-router插件:
npm install vue-router --save
然后在全局js中引入vue-router:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
2、配置路由
我们要按照配置规范,来配置访问不同页面的时候,加载不同组件的路由规则,分为以下几步:
(1)创建组件并引入组件
顾名思义,就是将我们准备进行路由的子组件进行实例化,即“new 它!”。
例如这里定义了两个准备挂载的组件对象:
const Foo = {template:'<div>foo</div>'};
const Bar = {template:'<div>bar</div>'};
如果是编写好的组件页面,直接import引入,后面就可以直接用:
import HelloWorld from '@/components/HelloWorld'
像这样第二步就可以直接用HelloWorld对象了。
(2)定义路由
这里就是配置具体的路由规则,每一个路由映射一个组件,即key是访问路由,value是路由的组件对象,最终封装为一个routes数组:
const routes = [
{path:'/foo',component: Foo},
{path:'/bar',component: Bar},
{path:'/helloWorld',component: HelloWorld}
]
(3)实例化Router
将刚才的routes封装为一个Router对象,即这个routes作为一个属性,封装为一个vue-router组件对象:
const router = new Router({
routes
});
(4)创建和挂载根实例
将刚才实例化的Router对象,挂载到Vue实例的router属性上,vue就会按照这个路由对象配置的路由标准,进行自动路由页面了:
const app = new Vue({
router
}).$mount("#app");
(5)引用并访问路由内容
① 直接通过路径访问挂载
如果我们想通过根组件直接访问路由的子组件内容,可以在跟组件的页面中,直接通过“<router-view></router-view>”标签,就可以加载根组件内容,前提是需要在页面上输入子组对应的path路径,该组件会自动加载主路径后面跟着的子路径path对应的页面内容。例如想加载"foo"组件内容,就访问“http://localhost:8080/#/foo”即可。
② 通过超链接挂载
通过“router-link”标签,我们可以像点击超链接一样,在<router-view>区域显示路由过来的子组件的内容:
<router-link to="/foo">Foo</router-link>
<router-link to="/bar">Bar</router-link>
其中的to的值,就是在路由中定义的path的值。
我们下面敲一下实例来测试一下。
三、使用路由实现自动挂载
我们首先打开之前的工程,在下面安装vue-router:
然后在工程中创建一个router文件夹,然后创建一个router.js文件(如果工程中自动生成了一个router/index.js,可以直接用,我们这里删除它自己写),用来创建和暴露Router对象:
//1、创建组件并引入组件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import News from '@/components/News'
Vue.use(Router)
//2、定义路由
const routes = [
{path:'/helloWorld',component: HelloWorld},
{path:'/news',component: News}
]
//3、实例化Router
const router = new Router({
routes
});
//4、暴露组件,在mian.js中引入该router
export default router
然后我们在全局mian.js中,引入刚刚暴露的router对象,并创建和挂载根实例:
import Vue from 'vue';
import App from './App';
// 引入路由
import router from "./router/router.js"
/* 创建和挂载根实例 */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在App.vue根组件中,我们先把之前的手动引入去掉,之加入一个“<router-view>”标签对:
<template>
<div id="app">
<h2>{{msg}}</h2>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
}
}
</script>
<style>
</style>
此时启动工程后,我们通过浏览器,访问定义的路由地址,就可以看到相应的内容:
说明我们配置的路由生效了。此时我们如果想通过超链接控制路由的内容,添加;两个“router-link”标签即可:
<template>
<div id="app">
<h2>{{msg}}</h2>
<router-link to="/helloWorld">首页</router-link>
<router-link to="/news">新闻</router-link>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: '你好,vue'
}
}
}
</script>
<style>
</style>
效果:
可以看到点击链接后,子组件内容就渲染到了router视图区域。
细心的童鞋会发现,直接访问默认路径时,我们看不到原来的Hello以及News组件的内容:
这是因为我们没有配置默认的路由,如果我们想在访问根组件的时候,默认加载路由内容,我们在定义路由配置时,定义一个空路径‘/’或默认统配路径‘*’,指定一个组件即可:
const routes = [
{path:'/helloWorld',component: HelloWorld},
{path:'/news',component: News},
{path:'/',component: HelloWorld}
]
这里我们空路径‘/’时,默认指定加载的组件为HelloWorld组件。
再次访问默认页面时,就挂载了指定的默认组件:
以上就是基本的简单路由操作,后续我们会使用路由来实现一个动态导航功能,以及学习路由更加深入的知识。
参考:
《IT营:itying.com-2018年Vue2.x 5小时入门视频教程》
转载请注明出处:https://blog.csdn.net/acmman/article/details/109566202