Vue router 基本使用

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
// 1、通过 CDN 导入路由包（也可以使用 npm install vue-router 安装到项目）
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"><!-- 2、使用 router-link 组件来导航。通过传入 `to` 属性指定链接。--><!-- <router-link> 默认会被渲染成一个 `<a>` 标签，可通过 tag 设定成其他标签--><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link><!-- 7、路由出口，通过<router-view></router-view>（路由组件的容器）展示匹配的组件--><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</div><script>
// 3、定义（路由）组件，也可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }// 4、定义路由（将组件和链接关联）
// 每个路由应该映射一个组件。
const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
]// 5、 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({routes     //（缩写）相当于 routes: routes
})const app = new Vue({}).$mount('#app')// 6、使整个应用支持路由。
app.use(router)</script>

Vue-router 传参

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...)。

由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。我们以router.push 为例来详解 Vue-router 传参。

通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$router 的形式访问当前路由。

1、query 方式传参和接收参数：

// 声明式传入参数：id=10
<router-link to="/foo?id=10">Go to Foo</router-link>
// or 编程式传入参数：id=10
this.$router.push({path:'/foo', query:{id:id}});// $route.query.参数名 获取参数
const Foo = { template: '<div>foo id:{{$route.query.id}}</div>' }

2、 params 方式传参和接收参数

// 定义路由时指定参数名 id 和 name
const routes = [{ path: '/foo/:id/:name', name: 'foo', component: Foo },
]// 传入参数：id=10, name=John
<router-link to="/foo/10/John"">Go to Foo</router-link>
// or 编程式传入参数：id=10, name=John
this.$router.push({name:'foo', params:{id:10, name:John}});// $route.query.参数名 获取参数
const Foo = { template: '<div>foo id:{{$route.params.id}}--foo name:{{$route.params.name}}</div>'
}

注意:params传参，push 里面只能是 name:'xxxx'，不能是 path:'/xxx'，因为 params 只能用 name 来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

query 和 params 方式的区别：query 相当于 get 请求，页面跳转的时候，可以在地址栏看到请求参数，而 params 相当于 post 请求，参数不会再地址栏中显示

3、props 方式传参和接收参数

在组件中使用 $route 使之与其路由形成高度耦合，使组件只能在某些特定的 url 上使用，可以使用 props 将组件和路由解耦。

// 定义路由时指定参数名 id 和 name
const routes = [{ path: '/foo/:id/:name', component: Foo, props:true },    //增加props
]// 传入参数：id=10, name=John
<router-link to="/foo/10/John"">Go to Foo</router-link>// 定义路由组件时加入 props 属性
const Foo = {props:["id","name"]template: '<div>foo id:{{id}}--foo name:{{name}}</div>'
}

在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。

为了解决ajax页面状态不能返回的问题，人们想出了一些曲线救国的方法，比如利用浏览器hash的特性，将新的资源路径伪装成锚点，通过onhashchange事件来改变状态，同时又避免了浏览器刷新。但这样始终显得有些hack。

现在HTML5规范为 window.history引入了两个新api，pushState 和 replaceState，我们可以使用它很方便的达到改变url不重载页面的目的。

Vue-Router 提供两种路由跳转模式：哈希模式(hash mode)和历史模式(history mode）。

hash 模式

# 不会刷新页面，也不会发起新的 HTTP 请求，只是实现客户端页面的定位，# 后面的字符不会被发送到服务器端，# 可以修改浏览器的访问历史记录。

hash 模式是通过改变锚点(#)来更新页面 url，并不会触发页面重新加载。我们可以通过window.onhashchange() 监听到hash 的改变，从而处理路由。

<div id="app"><a href="#/a">a</a><a href="#/b">b</a><component :is="comname"></component>
</div><script>Vue.component('com1',{template:'<h3>b组件</h3>'})Vue.component('com2',{template:'<h3>a组件</h3>'})var vm = new Vue({el:"#app",data:{comname:"com1"},methods:{},mounted(){// onhashchange函数监听hash改变window.onhashchange = () => { // 使用箭头函数，this指向vm对象const hash = location.hash    // window.loaction.hash 读取#值switch(hash){case "#/a" : this.comname="com1";break;case "#/b" :this.comname="com2";break;}}}})</script>

Vue-router hash

Vue-router 默认使用 hash 模式，使用 hash 模式时 url 中始终有 # 号。

history 模式

这种模式充分利用 history.pushState 和 history.replaceState API 来完成 URL 跳转而无须重新加载页面。使用 history 模式时URL中不带 # 号。

// 5、 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({routes,     //（缩写）相当于 routes: routesmode: 'history'    // 设置为 history 模式
})

Vue router 模式 hash 和 history相关推荐

vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
Vue-路由模式 hash 和 history
Vue 为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 创建的项目默认是hash模式 ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue router 原生html,Vue router 使用 History 模式导致页面请求 404
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...

Vue router 模式 hash 和 history