Vue router 模式 hash 和 history

目录

Vue router 基本使用

Vue-router 传参

hash 模式

Vue-router hash

history 模式

---

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: routes
  mode: 'history'    // 设置为 history 模式
})