vue-router
1-路由基本用法
在创建vue项目时，会帮我们自动生成一个router文件夹，里面存放着vue-router的index.js文件，里面记录着vue-router的一些基本配置。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/', //路由路径
name: 'Home', //路由名称，可自定义
component: Home,//路由对应的模块
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
每一个路由路径对应着一个view组件，当我们创建路由组件时，应该把组件放进views文件夹里
在views文件夹的下面，有一个App.vue文件，里面挂载着首页面所需呈现的相关路由.每个路由需要先进行组件注册，然后再去到router里的index.js进行配置后，再去到相应的页面通过<router-link to=’’ 路由路径">进行挂载(一定要写to属性)。父组件想要加载子组件路由的页面，需要在父组件内通过添加来承载页面
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/Border">Border</router-link> |
<router-link to="/about">About</router-link>|
<router-link to="/new">News</router-link>
</div>
<router-view/>
<!--通过页面导航(router-view)或编程导航显示页面，通过router-view来承载页面-->
</div>
</template>
然后我们只用在相应的页面里点击对应的a标签，就能进行相应的跳转了。
2-路由视图窗口-嵌套路由规则用法
路由也分为不同的层级，有一级路由，二级路由，多级路由，一般一个页面上使用的路由不超过三级。
创建二级时，我们需要创建对应的组件文件。然后在router里的index.js进行相关配置，在二级路由所对应的一级路由里添加配置属性children.
这里我们在一级路由/new下增加了一个二级路由/new/newlist.
然后在路由/new的template加上视图挂载容器，在methods里设置对应的路由跳转方法，这样就可以在/new页面下承载出/new/newlist的组件内容了。多级路由同理
<template>
<div>
<button @click="gotoNewList">显示新闻</button>
<br>
<hr>
<router-view/>
</div>
</template>
<script>
export default {
name: "News",
methods:{
gotoNewList(){
//如果不想通过返回键返回键返回上一层，可以使用$router.repalce
//正常情况下是可以产生历史记录的，通过使用$router.push
this.$router.push({
path:'/new/newlist',
})
}
}
}
</script>
3-路由重定向
像我们平常在一些页面都会显示各种广告，在经过一定时间过后广告会消失，这是通过路由重定向来实现的。
我们可以创建一个广告页面Ad.vue
在里面放上一张图片
<template>
<div>
<h2>{{time}}S</h2>
<img src="~@/../public/static/ad.webp" alt="">
</div>
</template>
然后我们在router里的index.js对首页面进行重定向
{
path: '/',
name: 'Home',
component: Home,
//访问根目录的时候重定向
redirect:'/ad'
},
以及在App.vue上进行挂载。当我们在重新进入到首页面时，就会进入Ad.vue这个页面。
接下来，我们只需在mouthed时设置一个定时器，它就可以像一些页面的广告一样了，经过一定跳转到其它页面了。这里我设置了5s.
export default {
name: "Ad.vue",
data() {
return {
time: 5, //时间s
timer: null
}
},
mounted() {
this.timer = setInterval(() => {
if (this.time <= 0) {
clearInterval(this.timer); //清除定时器
this.time = 0;
//router里的index.js 主页面redirect/ad后，ad不能再通过$router.repalce('/')返回主页面,会造成死循环
//正常情况下是可以产生历史记录的，通过使用$router.push
this.$router.push('/new')
} else {
this.time--
}
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
经过5S后页面会自动跳转到/new页面
4-数据请求
在开发中，我们经常要向服务器进行相应的数据请求，在vue中，我们常常使用fetch方法来进行数据请求
export default {
name: "NewList",
data(){
return{
newList:[]
}
},
created(){
fetch('请求地址')
.then((r)=>r.json())//将数据转换成json数据
.then((res)=> {
this.newList=res; //将数据传递给newList数组
console.log(res)
});
},
通过显示res我们可以看到，传递的数据是十个对象，每个对象具有五个属性。
通过v-for将数据渲染出来
<template>
<div>
<h1>新闻列表</h1>
<ul>
<li v-for="item in newList" :key="item.id">
<img width="100" :src="item.picUrl" alt="">
<div>
<p>{{item.title}}</p>
<span class="left">{{item.time}}</span><span>来源:{{item.source}}</span>
</div>
</router-link>
</li>
</ul>
</div>
</template>
5-编程导航
点击对应的新闻，进入新闻详情页面，根据请求链接，得知只有链接最后一位数据不同，即所对应id。
我们可以根据查询参数路由或动态参数路由来将对应的新闻id传递给新闻详情页面,以便请求对应的数据连接。
查询参数
methods:{
goToNewDetail(id){
this.$router.push({
path:`/new/newDetail?id=${id}`,
// 查询参数路由
query:{
id
}
//动态路由参数
// param:{
// id
// }
})
}
}
<template>
<div>
<h1>新闻列表</h1>
<ul>
<li v-for="item in newList" :key="item.id" @click="goToNewDetail(item.id)"> <!--将对应的新闻id传递进去-->
<img width="100" :src="item.picUrl" alt="">
<div>
<p>{{item.title}}</p>
<span class="left">{{item.time}}</span><span>来源:{{item.source}}</span>
</div>
</li>
</ul>
</div>
</template>
在router文件的index.js进行配置
{
path: '/new',
name: 'new',
component: News,
children: [
{
path: '/new/newlist',
name: 'new.list',
component: NewList
},
{
path:'/new/newDetail', //查询参数
// path:'/new/newDetail/:id', //动态路由参数
name:'new.detail',
component: NewDetail
}
]
},
在新闻详情页面进行请求请求
export default {
name: "NewDetail",
data(){
return {
newdetail:{}
}
},
created() {
//路由信息this.$route 路由
//页面路由 this.$router 路由器
const {query:{id}} = this.$route;//查询路由 先获取新闻传来的id
//const {params:{id}} = this.$route; // 动态路由
this.getNewDetatil(id)
},
methods:{
getNewDetatil(id){
fetch('请求数据链接'+id)
.then(r=>r.json()).then(res=>{
this.newdetail=res;
console.log(res)
})
}
}
}
可以看到请求过来的数据有7个相关的属性。
我们将它一一渲染到页面上
<template>
<div>
<h1>这是新闻具体页面</h1>
<h3>{{newdetail.title}}</h3>
<h6>{{newdetail.time}}{{newdetail.source}}</h6>
<img :src="newdetail.picUrl" alt="">
<p v-html="newdetail.content"></p>
<p>作者:{{newdetail.editor}}</p>
<p>记者:{{newdetail.reporter}}</p>
</div>
</template>
动态参数
methods:{
goToNewDetail(id){
this.$router.push({
path:`/new/newDetail/`+id,
//动态路由参数
param:{
id
}
})
}
}
{
path: '/new',
name: 'new',
component: News,
children: [
{
path: '/new/newlist',
name: 'new.list',
component: NewList
},
{
//path:'/new/newDetail', //查询参数
path:'/new/newDetail/:id', //动态路由参数
name:'new.detail',
component: NewDetail
}
]
},
export default {
name: "NewDetail",
data(){
return {
newdetail:{}
}
},
created() {
//路由信息this.$route 路由
//页面路由 this.$router 路由器
//const {query:{id}} = this.$route;//查询路由 先获取新闻传来的id
const {params:{id}} = this.$route; // 动态路由 先获取新闻传来的id
this.getNewDetatil(id)
},
methods:{
getNewDetatil(id){
fetch('请求数据链接'+id)
.then(r=>r.json()).then(res=>{
this.newdetail=res;
console.log(res)
})
}
}
}
路由参数注入组件
动态路由参数注入组件 props布尔模式
当我们不想通过this.$route来获取匹配相应的id数据时，我们可以通过在组件和路由里通过设置props来获取相应的this.id.
export default {
name: "NewDetail",
data(){
return {
newdetail:{}
}
},
created() {
//路由信息this.$route 路由
//页面路由 this.$router 路由器
// const {query:{id}} = this.$route;//查询路由
// const {params:{id}} = this.$route; // 动态路由
this.getNewDetatil(this.id)
},
props:['id'],
methods:{
getNewDetatil(id){
fetch('http://www.tanzhouweb.com/vueProject/vue.php?title=newsList'+id)
.then(r=>r.json()).then(res=>{this.newdetail=res
;console.log(this.newdetail)})
}
}
}
</script>
在router里的Index.js里进行路由配置,设置对应路由props为true
{
path: '/new',
name: 'new',
component: News,
children: [
{
path: '/new/newlist',
name: 'new.list',
component: NewList
},
{
// path:'/new/newDetail', //查询参数
path:'/new/newDetail/:id', //动态路由参数 绑定id
name:'new.detail',
component: NewDetail,
props:true
}
]
},
也可以获取相应的数据
查询参数注入组件 props函数模式
查询参数在router的index.js文件的路由props配置有一点不同，它是一个函数，返回一个对象。
{
path: '/new',
name: 'new',
component: News,
children: [
{
path: '/new/newlist',
name: 'new.list',
component: NewList
},
{
path:'/new/newDetail', //查询参数
//path:'/new/newDetail/:id', //动态路由参数
name:'new.detail',
component: NewDetail,
//props:true //动态路由组件传参
props(route){
return {
id:route.query.id
}
}
}
]
},
将前面相关的配置转为查询参数配置依旧可以获取数据。
a链接跳转
通过a链接来进行跳转
<template>
<div>
<h1>新闻列表</h1>
<ul>
<li v-for="item in newList" :key="item.id">
<!-- <router-link :to='`/new/newDetail?id=${item.id}`'>--><!--查询参数-->
<router-link :to='`/new/newDetail/${item.id}`'> <!--动态参数-->
<img width="100" :src="item.picUrl" alt="">
<div>
<p>{{item.title}}</p>
<span class="left">{{item.time}}</span><span>来源:{{item.source}}</span>
</div>
</router-link>
</li>
</ul>
</div>
</template>
左下角会显示相应的链接
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
