Vue - Router的深入学习

用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。

Vue - Router的实现方式

1.Hash 模式

浏览器地址为: http://localhost:8080/#/index

 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

 hash 采用的是 onHashChange 这个事件来监听hsah值的变化,根据不同的值来渲染不同的页面.

 同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置;

 2.History 模式

  浏览器地址为: http://localhost:8080/index

  History模式就没有那个很丑的#号了.

  这种模式采用的是 HTML5 新增的一个 history 对象相关的一些方法来完成URL的跳转而无需重载页面

    - history.pushState()

    - history.replaceState()

    - window.onpopState

    History配置:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

    history模式在上线之后,会出现 404 问题. (需要后台配置)

3.使用路由模块来实现页面的跳转

 1.直接修改浏览器地址

 2. this.$router.push('路由地址')

 3. <router-link to="路由地址"></router-link>  //这种方式会在页面中渲染成一个 a 标签

Vue - Router 的安装方法

 1.使用script方式引入

 2. 使用 npm 方式安装

npm install vue-router

  在Vue模块中使用路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

简单的配置一个路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/home.vue'    //引入模块

Vue.use(VueRouter);    //挂载属性

//创建路由对象并配置路由规则
const router = new VueRouter({
routes: [
{ path: '/home', component: Home }    //URl地址匹配上了,渲染Home模块
]
});

export default router    //暴露出路由对象

在app.vue中留坑 <router-view>路由匹配的组件会渲染在这里面</router-view>

路由命名

 给路由取一个 name 名字

routes: [
{ path: '/home', name:'Home', component: Home }    //URl地址匹配上了,渲染Home模块
]
});

router-link to 属性可以直接使用一个对象采用 name 属性去控制路由的切换,如;

<router-link to={ name:'Home' }></router-link>

to 属性接受对象的时候,对象都有哪些属性

    - name    路由的名字

    - path      路由的路径

    - params  路由动态传参

    - query     路由的?号传参

ps: path 与 params 不可以同时使用, 如果要用 params的话,请使用 name 与他配合



版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

Top

分享: