vue-router--安装vue-router

·  阅读 1741

vue-router的安装

上文讲了前端路由的概念。其实三大框架都有自己前端路由的实现。

  • Vue对应vue-router
  • React对应ReactRouter
  • angular对应ngRouter

vue-router本质是一个vue的一个官方插件。它的作用就是处理路径和组件之间的映射关系,路径的改变对应进行组件的切换。

安装方法

安装指令:

npm install vue-router --save

很显然,这是一个运行时依赖

配置vue-router

由于我们用cli2初始化项目的时候,我下载了vue-router.它也默认帮助我们配置了vue-router。文件就在src/router,这个文件就是vue-router的配置。 配置vue-router,其实也不是很难。

  • 第一步,需要使用Vue.use()方法安装。Vue如果要使用任何插件,都要通过这个方法将其安装。
//给Vue安装vue-router插件
import  Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
  • 第二步,创建一个路由实例
//
let RM = new Router({
routes:[]
});

创建实例都是要传参的,比如创建vue实例,路由实例也不例外。路由实例同样传入的是一个对象,这个对象有个最重要的属性就是routes,这个routes属性对应的是一个数组!这个数组就是路径和组件的映射关系。

routes:[
		{
        path:"/",//路径
        component:HelloWorld//组件
	}
]
  • 第三步,使用路由实例

在vue实例中挂载路由实例。

//router/index.js中应该导出路由实例
export default RM;
//main.js
import  RM  from "router"
new Vue({
RM
})

实际情况跟我的伪代码一摸一样。这里有个细节,直接import router from "./router"为什么可以直接找到route/index.js,因为存在一个语法糖,当你的导入文件是个文件夹,它默认导入文件夹下面的index.js文件

使用vue-router

先明确我们已经做好的事儿:1.安装配置好了vue-router 2. 创建了vue-router的实例,并将其挂载到了根实例上。接下来我们要做的事儿很重要就是**配置路径和组件的关系表。也就是我们的routes数组 **

配置路径和组件的关系表

每一组映射对应数组的一个元素,元素是一个对象,有两个最重要的属性,path和component。其实意思很简单,当你的路径是path的时候,加载相应的component。那我们肯定要生成并导入这些组件,在这里,我直接导入了Home组件和About组件。(内容很普通就是在模板中加了一个h1标签)

更改路径和加载相应组件

这个需要用到两个全局组件:router-link和router-view.这两个组件各有用处。

切换url

现在我们要实现的就是要切换url,加载相应组件。那么怎么切换url呢?肯定不是在地址栏输入url回车。这样肯定会刷新页面,发生数据请求。我们要实现的是改变url,不刷新页面,不发生数据请求。之前我们说过,是通过location.hash实现或者通过history模式实现。**这里我们是使用router-link组件来实现,**它的本质还是使用上述两种方式实现的。router-link是一个vue-router全局组件,可以在任何地方用它,他会被渲染成一个a标签。 我们可以在app.vue中使用它。它的to属性就类似a标签的href属性一样,决定它切换到哪个path。

加载对应组件

现在我们的url切换实现好了,按照routes的原则,当我们点击首页,应该给我们加载Home组件。当我们点击关于,应该给我们加载About组件。那么这个组件加载到哪个位置呢?这就要用到另一个全局组件了router-view。这个全局组件就是用来占位的,很容易理解。当我们点击首页,Home组件加载出来,替换router-view的位置。当我们再点击关于,就会给我们销毁Home组件,从而加载About组件,替换router-view的位置。

效果演示

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改