版权声明：版权：cometang--唐家世少所有 https://blog.csdn.net/qq_39005315/article/details/83095532
vue 笔记二 v-router构建SPA
html路由： <router-link></router-link> //相当于a标签的作用 跳转标签
js路由: this.$router.push({path:''}) //js路由跳转
html路由页面渲染： <router-view></router-view> //跳转完成后 渲染页面的内容
1.动态路由匹配
不同的url参数 渲染的页面的内容也是不同的
// 更改router的访问地址 router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'GoodsList',
component: GoodsList
}
]
})
//在router同级目录上新建的 views/GoodsList.vue
<template>
<div>
这是一个 商品列表页面
</div>
</template>
<script>
export default {
data () {
return{
msg:'hello vue'
}
}
}
</script>
动态路由 根据url传值
//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/goods/:GodsId/user/:UserId',
name: 'GoodsList',
component: GoodsList
}
]
})
//GoodsList.vue
<template>
<div>
这是一个 商品列表页面
<p >商品的id：<span>{{$route.params.GodsId}}</span></p>
<p>用户的id：<span>{{$route.params.UserId}}</span></p>
</div>
</template>
<script>
export default {
data () {
return{
msg:'hello vue'
}
}
}
</script>
结果：
//在浏览器输入
http://localhost:8080/#/goods/123/user/100
这是一个 商品列表页面
商品的id：123
用户的id：100
1.2.请求方式
1.2.1 history
访问地址：
http://localhost:8080/goods/123/user/100
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/goods/:GodsId/user/:UserId',
name: 'GoodsList',
component: GoodsList
}
]
})
1.2.2 hash
访问地址:
http://localhost:8080/#/goods/123/user/100/
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
Vue.use(Router)
export default new Router({
mode:'hash', //默认也是hash的模式
routes: [
{
path: '/goods/:GodsId/user/:UserId',
name: 'GoodsList',
component: GoodsList
}
]
})
2.嵌套路由
目的：在商品列表页面中查看商品标题与商品图片
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
children:[ //定义子路由
{
path:"title" , //不能加 斜线，二级路由，可以简写，自动去查找
name:'title',
component:Title
},
{
path:"image" , //不能加 斜线
name:'image',
component:Image
},
]
}
]
})
//在views下新建Image.vue 与 Title.vue
//Image.vue
<template>
<div>
这是商品图片的子组件
</div>
</template>
<script>
export default {
name: "Image"
}
</script>
//Title.vue
<template>
<div>
这里是商品标题的子组件
</div>
</template>
<script>
export default {
name: "Title"
}
</script>
在GoodsList.vue中 加入router-link 与router-view
<template>
<div>
这是一个 商品列表页面
<!--这个地址是 绝对地址 不能简写，简写了就是一级路由-->
<router-link to="/goods/title">显示商品标题</router-link>
<router-link to="/goods/image">显示商品图片</router-link>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data () {
return{
msg:'hello vue'
}
}
}
</script>
3.编程式路由
通过js实现路由/页面的跳转
$router.push("name") //跳转方式1
$router.push({path:"name"}) //跳转方式2
$router.push({path:"name?a=123"}) //传参方式1
$router.push({path:"name",query:{a:123}}) //传参方式2
$router.go(1) //跳转下一级页面 跳转上一页面:-1
//在下级页面 可以取得参数
$router.parmas(a)
//接收问号拼接传过来的参数
{{$route.query.a}}
//购物车页面 js跳转 router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Carts from '@/views/Carts'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
children:[ //定义子路路
{
path:"title" , //不能加 斜线，二级路由，可以简写，自动去查找
name:'title',
component:Title
},
{
path:"image" , //不能加 斜线
name:'image',
component:Image
},
]
},
{
path:'/Carts',
component:Carts,
}
]
})
在views下新建Carts.vue
<template>
<div>
这是一个 购物车页面
<p>
商品id：{{$route.query.GoodsId}}
</p>
</div>
</template>
//在goodsList.vue中添加跳转按钮与事件
<template>
<div>
这是一个 商品列表页面
<!--这个地址是绝对地址不能简写，简写了就是一级路由-->
<router-link to="/goods/title">显示商品标题</router-link>
<router-link to="/goods/image">显示商品图片</router-link>
<div>
<router-view></router-view>
</div>
<button @click="jump">js跳转到购物车页面</button>
</div>
</template>
<script>
export default {
data () {
return{
msg:'hello vue'
}
},
methods:{
jump(){
this.$router.push('/Carts?GoodsId=100');
}
}
}
</script>
3. 命名路由
//Carts.vue
<template>
<div>
这是一个 购物车页面
<p>
{{$route.params.CartsId}}
</p>
</div>
</template>
//GoodsList.vue
<template>
<div>
这是一个 商品列表页面
<router-link v-bind:to="{name:'Carts',params:{CartsId:100}}">命名路由跳转
</router-link>
</div>
</template>
//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Carts from '@/views/Carts'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
},
{
path:'/Carts/:CartsId',
name:'Carts',
component:Carts,
}
]
})
4. 命名视图(一般不会使用)
//app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-view name="title"></router-view>
<router-view name="image"></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;
}
</style>
//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Carts from '@/views/Carts'
Vue.use(Router)
export default new Router({
mode:'hash',
routes: [
{
path: '/',
name: 'GoodsList',
components:{
default:GoodsList,
title:Title,
image:Image,
}
},
]
})