Vue Router 是 Vue.js 官方的路由管理器,可以让构建单页面应用变得易如反掌
单页面应用(Single Page Application,SPA)
应用只有一个完整的页面,它在加载页面时,不会加载全部页面,只加载一个首页的容器,其它页面的内容在首页容器某个位置,需要页面切换时只更新某个指定的容器中内容
- 单页面应用的核心之一是:更新视图而不重新请求页面
单页面应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容
但当url变化,都会造成页面的刷新,目前有两种方式实现:
- 一种方式是用hash实现路由
- 另一种方式是用history
Vue-Router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式
Vue-Router的使用
通过Vue-cli安装Vue项目时可以把Vue-Router一起安装到项目中,或者另外安装引入
Vue-Router 使用步骤
1、安装依赖
2、在Vue中使用 注册路由组件
3、定义路由规则 路由规则是一个数组
4、创建路由对象
5、在Vue实例创建时传入创建路由实例
new Vue 时传入的router是为了给Vue实例注入 router,router,router,route 这两个属性
- $route 存储当前的路由规则信息,路径、参数等信息
- $router 是提供一些操作路径的方法 push、replace、go 还能通过currentRoute拿到当前路由规则信息
6、在首页(主页面)使用显示路由组件,和使用显示跳转(不是必须,可以用编程式导航代替)
动态路由
在路由规则里 path后面跟上 :/参数名,就可以在url上传参数给路由对应的组件
还可以再路由规则中指定props: true,指定后url上面的参数会作为props传给组件
嵌套路由
当多个路由的组件都有相同的内容,可以将这些相同内容提取到公共的组件当中,在公共组件里面通过路由的方式(使用)显示不同的路由组件
编程式导航
除了用外,更多情况下是使用$router的方法来实现路由跳转
- push 方法 会记录本次历史
- replace 方法 不会记录本次历史 会替换历史记录
- go 方法 会以0为基准跳转到相对页面
// 跳转 会记录本次历史 this.router.push(′/′)this.router.push('/') this.router.push(′/′)this.router.push({ name: 'Home' }) this.router.push(name:′Detail′,params:id:2)//跳转不会记录本次历史this.router.push({ name: 'Detail', params: { id: 2 }}) // 跳转 不会记录本次历史 this.router.push(name:′Detail′,params:id:2)//跳转不会记录本次历史this.router.replace('/login') // 按照当前历史进行跳转 负数是回退 正数是向前 this.$router.go(-2)
Hash模式和History模式 区别
两种方式都是,当路径法发生变化,不会向服务器发送请求,使用js监视路径的变化根据不同的地址渲染不同的内容
Hash模式
- url里面有#,#后面是路由地址
- 原理实现是基于锚点 和 onhashchange事件
History模式
- url里面没有#
- 原理实现是基于HTML5中History API
- history.pushState()
- history.replaceState()
History模式 服务端支持
History需要服务器支持,因为History没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,把除了静态资源外所有路由都重定向到根页面
在node中,可以使用 connect-history-api-fallback 来重定向到根页面
在nginx中,在配置文件中进行修改
一个简单Vue-Router实现
Vue-Router中有两种模式
Hash 模式
- URL 中 # 后面的内容作为路径地址
- 监听 hashchange 事件
- 根据当前路由地址找到对应组件重新渲染
History 模式
- 通过 history.pushState() 方法改变地址栏
- 监听 popstate 事件
- 根据当前路由地址找到对应组件重新渲染
使用自定义的Vue-Router
需要先在Vue中使用自定义的Vue-Router,注入到Vue实例中
自定义的VueRouer需要实现的功能
- Vue.use()会调用传入对象的静态install方法,需要在这里实现注入到Vue中,保存Vue实例给其他地方用
- install里面mixin混合时可以在Vue实例beforeCreate生命周期中,可以进行一些初始化init()
- constructor 构造器中要把传入的options保存起来
- 初始化init() 把路由规则数组转成对象方便获取;初始化组件;监听浏览器的历史前进后退事件
- 编码方式的路由跳转功能
install()
constructor()
init()
createRouteMap()
initComponents()
需要用编码的方式创建,这个方法用render函数来实现
initEvent()
两种模式对应了两个window的变化事件
routerPush()
页面跳转
作者:唯小南
链接: https:// juejin.cn/post/69037691 64184944648
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。