之三 Vue-router 前端路由 与 “#”

前端路由,将本来根据地址请求后端返回页面,变为了前端直接重新渲染页面。

优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户

缺点:不利于SEO;使用浏览器的前进、后退键会重新发送请求,没有合理地利用缓存;单页面无法记住之前滚动的位置,无法在前进、后退的时候记住滚动的位置。

vue-router 是构建vue SPA的关键

通常,我们使用<router-link></router-link> 与<router-view></router-view> 。

<router-link> 负责路由的跳转,它的 “to” 属性指定跳转的地址。

<router-view> 负责路由的渲染。

 

认识一点,vue-router 就是对浏览器中提供的history API 的封装,感兴趣可以了解history API。

 

动态路由匹配

动态路由,是指路由地址中含有变量的那种路由,比如下面

 

下面是一个动态路由的例子。

首先我们先写个普通路由。

页面,代码如下。

<template>
  <div>这是商品列表页</div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>

router文件夹下 index.js 代码如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'GoodList',
    component: GoodList
  }]
})

就好啦。启动一下服务器就可以看到啦。

下面我们做一个动态路由的例子。

首先,我们规定一个url 地址,下面是router 文件夹下的index.js 代码。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/goods/:goodsId',
    name: 'GoodList',
    component: GoodList
  }]
})

然后我们在GoodList.vue 中修改代码,如下。

<template>
  <div>
    这是商品列表页
    <span>{{$route.params.goodsId}}</span>
  </div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>

如上,复合规则的url 将会改变页面。

再复杂一些的动态路由,router/index.js如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/goods/:goodsId/user/:name',
    name: 'GoodList',
    component: GoodList
  }]
})

GoodList.vue 代码如下。

<template>
  <div>
    这是商品列表页
    <span>{{$route.params.goodsId}}</span>
    <br />
    <span>{{$route.params.name}}</span>
  </div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>

好啦。

可以看到,在地址栏,我们的地址是这样的: http://localhost:8080/#/goods/89/user/nnn

有一个“#” 号。这实际上是一种路由的哈希。地址可以分两种模式:history(直接用url 地址),哈希(默认,hash)。

这个在router 下面的index.js 中是可以修改的。如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
    path: '/goods/:goodsId/user/:name',
    name: 'GoodList',
    component: GoodList
  }]
})

然后,就可以用这种地址 http://localhost:8080/goods/89/user/nnn 访问了。

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试