路由基础介绍
前端路由有什么优点和缺点?
- 优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户
- 缺点:不利于SEO;使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存;单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置
vue-router用来构建SPA
导航 :<router-link></router-link>或者this.$router.push({path:""})
视图 :<router-view></router-view>
1.动态路由
| 模式 | 匹配路径 | $route.params |
|---|---|---|
| /user/:username | /user/admin | { username:'admin' } |
| /user/:username/stu/stuid | /user/admin/stu/123 | { username:'admin',stu:123} |
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
Vue.use(Router)
export default new Router({
mode:"history",
routes: [
{ path: '/', redirect: 'goods' }, //redirect重定向到goods，即设置goods为默认路由
{
path: '/goods/:goodId/user/:name',
name: 'goods',
component: goods
}
]
})
// components/goods.vue
<template>
<div>
<p>我是商品id{{$route.params.goodId}}</p>
<p>我是用户{{$route.params.name}}</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
动态路由
2.嵌套路由
父路由嵌套子路由
router-link的路由方式 :
to后面跟绝对路径to后面写相对路径,再加上append属性,就会在当前路径上追加
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{ path: '/', redirect: 'goods' },
{
path: '/goods',
name: 'goods',
component: goods,
//子路由
children: [
{
path: 'title',
name: 'title',
component: title
},
{
path: 'image',
name: 'image',
component: image
}
]
}
]
})
// components/goods.vue
<template>
<div>
<p>我是商品id{{$route.params.goodId}}</p>
<p>我是用户{{$route.params.name}}</p>
<router-link to='/goods/title'>显示标题子组件</router-link>
<router-link to='image' append>显示图片子组件</router-link>
<!-- 父组件中嵌套子组,router-view是让子组件显示的地方 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
//components/title.vue
<template>
<div>
我是title子组件
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
//components/image.vue
<template>
<div>
我是image子组件
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
image子组件
title子组件
3.编程式路由
通过js来实现页面的跳转
$router.push('name')
$router.push({path:'name'})
$router.push({path:'name?a=123'})或者$router.push({path:'name',query:{a:123'}})
$router.go(1)
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'
import cart from '@/components/cart'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{ path: '/', redirect: 'goods' },
{
path: '/goods',
name: 'goods',
component: goods,
children: [
{
path: 'title',
name: 'title',
component: title
},
{
path: 'image',
name: 'image',
component: image
}
]
},
{
path: '/cart',
name: 'cart',
component: cart
}
]
})
// components/goods.vue
<template>
<div>
<p>我是商品id{{$route.params.goodId}}</p>
<p>我是用户{{$route.params.name}}</p>
<router-link to='/goods/title'>显示标题子组件</router-link>
<router-link to='image' append>显示图片子组件</router-link>
<!-- 父组件嵌套子组,router-view是让子组件显示的地方 -->
<router-view></router-view>
<router-link to='/cart'>跳转购物车组件</router-link>
<button @click="toCart">跳转购物车组件</button>
</div>
</template>
<script>
export default {
methods:{
toCart(){
// this.$router.push('/cart')
// this.$router.push({path:'/cart'})
this.$router.push({path:'/cart?goodId=123'})
// this.$router.go(-1)
}
}
}
</script>
<style>
</style>
// components/cart.vue
<template>
<div>
我是购物车组件
<!-- this.$router.push({path:'/cart?goodId=123'}) 用query来接收参数-->
<span>{{$route.query.goodId}}</span>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
goods组件
点击链接和按钮都能成功跳转到购物车组件
cart组件
4.命名路由和命名视图
给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字，通过名字进行对应组件的渲染
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import goods from '@/components/goods'
import title from '@/components/title'
import image from '@/components/image'
import cart from '@/components/cart'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{ path: '/', redirect: 'goods' },
{
path: '/goods',
name: 'goods',
components: {
default:goods,
title:title,
image:image
}
},
{
path: '/cart/:cartId',
name: 'cart',
component: cart
}
]
})
// App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-view name='title' class="left"></router-view>
<router-view name='image' class="right"></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.left,.right{
float: left;
width: 49%;
border: 1px solid gray;
}
</style>
