vue 路由

最新推荐文章于 2024-06-28 11:44:32 发布

飞扬_柳絮

最新推荐文章于 2024-06-28 11:44:32 发布

阅读量86

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/tjcjava/article/details/114871346

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、安装：npm install --save vue-router

2、基本配置：

// 2.1 路由声明： index.js 
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router) // 全局使用

import Home from "./views/home";

export default new Router({
  mode:'history', // 刷新会跳转到首页
  routes:[
    {
      path:'/',
      component:Home
    }
  ]
})

// 2.2 路由引入使用：main.js
import Vue from 'vue'
import router from './router' // 引入
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

// 2.3 App.vue
<template>
  <div id="app">
    <!--路由出口: 会渲染 index.js 内匹配到的路由组件-->
    <router-view class="view"/>
  </div>
</template>

3、路由跳转方式：

声明式：<router-link :to="...">
编程式： router.push(...)
语法：router.push(location, onComplete?, onAbort?)
location 可以是字符串 or 对象
onComplete、onAbort：回调函数将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用
router.push('home')// 字符串
router.push({ path: 'home' })// 对象
router.push({ name: 'user', params: { userId: 123 }})// 命名的路由
router.push({ path: 'register', query: { plan: 'private' }})// 带查询参数，变成 /register?plan=private

备注：
1、params 必须和name配合使用(params必须用name来识别路径)，path 存在时，params 不起效
2、如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)
3、query与params传参机制不一样：如果要隐藏参数用params，如果强制刷新不被清除用query

4、vue-router中hash模式和history模式的区别

1) 默认使用hash,最直观的区别就是在hash模式下URL夹杂着#号 ,而history模式下没有
2) hash 模式
hash模式依靠的是onhashchange()事件去监听location.hash的改变。
比如URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history 模式
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法
pushState()：可以改变URL地址且不会发送请求
replaceState()：可以读取历史记录栈，还可以对浏览器记录进行修改。
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

结论： hash 和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

备注：1. history 模式的问题：在history下刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面
2. Vue下路由History模式打包后页面空白的解决方法：https://www.jb51.net/article/142831.htm
https://blog.csdn.net/g1531997389/article/details/79154179

参考：https://www.cnblogs.com/chen-yi-yi/p/11151941.html