之前在写vue项目的时候在路由那块不是特别清晰，现在写个整理，记录下自己的学习心得
在以往的网站中，想要做到各个页面跳转会想到用a标签来实现，在vue项目中，想要实现这样的跳转也可以用a标签来，但是相比之下，有一种更好的插件可以用，那就是路由（router）
在下面点击跳转页面！！解决哪个路由代表哪个组件显示酱紫！！！
router就像一般的插件一样在vue项目中遵循先安装、配置（默认有个router.js配置文件）、使用的流程，在安装手脚架的时候可以一起将router一起安装了；
首先，会自动生成一份router标准文件写法，但是从开始先写最简单最关键的参数配置routes(这里有s的！)，在router.js中配置这个文件
// 这里是router.js文件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) //使用注册vue这个路由
export default new Router({
// mode:'history',
// base:process.env.BASE_URL,
routes:[
{//只写哪个路径对应哪个组件
path:'/film',
component:Film
},
{
path:'/cinema',
component:Cinema
},
{
path:'/center',
component:Center
}
]
})
上面的代码说到，跳转到哪个路径时就展示哪个组件，那接下来就是，在哪里如何跳转到这些路径，组件在哪里怎么展示
写好这三个组件，组件名一般大写的！【这个嗯】
然后在router.js中导入这三个组件
注意：@是指默认到src问价下！！可好用了！！
写完路由后记得在main.js那里引入注册才行！！
import App from './App.vue'
import router from './router'
import vueConfig from '../lib/vue.config'
vue.config.productionTip = false
new vue({
router,
// 这里原本可以写是 router：router,ES6语法中key和value值相等时可以省略写
// router：是固定写法，后面的router是引进的模块命名为了方便理解，写成a也行，但是要和上面引入那里名字一致
render:h => h(App)
}).$mount('#box')
加载的组件怎么展示呢，在哪里展示呢，都知道组件要加载到App.vue中展示的，但是router中的组件是怎么随着页面的不同在展示呢，不可能每个组件都在App.vue中使用这样写的，这样没办法根据跳转换页面
这时候router插件提供了一个路由容器，就是,相当于一个路由插槽在那里霸位置，到路由说它现在到那个的时候就切换到那个组件
<template>
<div>
hello vue
<!-- 路由容器 -->
<router-view></router-view>
<!-- 接下来转到film时，这里会展示film组件，展示cinema时会展示cinema组件 -->
</div>
</template>
做完上面那些操作后，可以实现在网址上面手动加路由后缀实现页面切换，But…大哥，我们是要在点击APP时实现跳转！于是乎！……有了路由声明式导航！
然后现在的问题是，知道执行的组件在哪里了，那路劲往哪儿链接跳转呢？有了router，肯定不是用a标签啦！
在使用下面的Tabbar时，使用a标签写跳转时，根据卖座电影的那些导航会这样写路径
// 这里写的Tabbar组件
<template>
<div>
<ul>
<li>
<a href="/#film">film</a> //把井号也给带上了才行
</li>
<li>
<a href="/#cinema">cinema</a>
</li>
<li>
<a href="/#center">center</a>
</li>
</ul>
</div>
</template>
这个时候考虑，使用a标签来跳转页面的话，如何监听路由的变化来做出改变？？**我们需要找到个和路由相关的东西，使得这边点击变化就是路由的变化！**这时，router提供了个很好用的东西来代替a标签，叫
// 这里写的Tabbar组件
<template>
<div>
<ul>
<li>
//改成这样子！
<router-link to = "/film">film</router-link>
</li>
<li>
<router-link to = "/cinema">cinema</router-link>
</li>
<li>
<router-link to = "/center">center</router-link>
</li>
</ul>
</div>
</template>
但是这个时候因为相当于渲染的时候将渲染成a链接的，这是是带有a标签的默认样式的，于是乎=> 去除样式，有个自带的功能，就是tag属性可以让渲染时成为任何一个标签！！！
于是乎，直接让其变成li标签！！！
// 这里写的Tabbar组件
<template>
<div>
<ul>
<router-link to = "/film" tag="li">film</router-link>
<router-link to = "/cinema" tag="li">cinema</router-link>
<router-link to = "/center" tag="li">center</router-link>
</ul>
</div>
</template>
这个时候让标签渲染成li标签，直接不要了原本的li，通过路由实现跳转，而不是超链接的！
如果我要点击跳转的时候有导航有高亮显示时，给它一个样式绑定过来↓
// 这里写的Tabbar组件
<template>
<div>
<ul>
<router-link to = "/film" tag="li" activeClass="myactive">film</router-link>
<router-link to = "/cinema" tag="li" activeClass="myactive">cinema</router-link>
<router-link to = "/center" tag="li" activeClass="myactive">center</router-link>
</ul>
</div>
</template>
<style lang="scss" scoped>
// 加scoped 作为样式的作用域，有好有坏，一般会加
.myactive{
// background: yellowgreen; 这里相当是li标签了，用的是color
color: yellow;
}
</style>
这时点击就会出现高亮的颜色！！以上是声明式导航！！
小总结：1、要将路由配置好 2、要将每个对应的组件写好引入路由配置中 3、组件展示的地方
4、路由跳转变化之间的联系
有时候需要输错域名后面的时候还是会跳转到首页那样子，称为重定向
export default new Router({
// mode:'history',
// base:process.env.BASE_URL,
routes:[
{//只写哪个路径对应哪个组件
path:'/film',
component:Film
},
{
path:'/cinema',
component:Cinema
},
{
path:'/center',
component:Center
},
// 加这一块
{
path:'*',
redirection:'/film'
}
]
})
但是在有些时候，会有这样子↓
就是在film里还嵌套着两个可以跳转的子路由，nowplaying和comingsoon，这时，就类似这样子↓
在film里有子路由，在展示film组件的前提下还展示nowplaying或者comingsoon的组件,路由变到子路由时将要展示的nowplaying组件和comingsoon组件插进flim组件中
这时
routes:[
{//只写哪个路径对应哪个组件
path:'/film',
component:Film,
children:[
{
path:'/film/nowplaying',
// 或者写 path:'nowplaying',这样的话就不要斜杠
component:Nowplaying
},
{
path:'/film/comingsoon',
component:Comingsoon
},
//这里也可写个子路由的重定向酱紫
{
path:'*',
redirection:'/film/nowplaying'
}
]
},
{
path:'/cinema',
component:Cinema
},
{
path:'/center',
component:Center
},
// 加这一块
{
path:'*',
redirection:'/film'
}
]
})
这个是根据不同的路由跳转来显示不同组件的一个地方！
按照上面的做完后，只能在网址上面通过手动修改网址来达到跳转，后面还需要根据子路由导航那里来改，以上是二级路由的处理！！！
接下来的问题是：在有列表展示的地方需要经过点击列表进入相对应的详情页，这时是这个样子的，疫情期间展示不多
实际中我们需要根据获取的数据来跳转到相对应的地方，以Nowplaying 组件为例子，里面有展示很多上映的电影，这时是需要根据某部电影跳转到相应的页面的！
分析：我们需要根据后端获取的数据来根据id跳转，这里涉及到路由的两个概念，这里先说下：
$router 和 $route
1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例
对象， 这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的
name,path,params,query等
接下来这边如果不是看的很清楚，可以结合后面的vue项目记录再加深理解，这里主要是值 在flim中的列表上（这个列表是渲染出来的），跳转到相对应的详情页，但是这里的detail是在nowplaying那里转过来的，
接下来的关键点都是：如何获取数据的id
在router中配置下
{
// 这样的话加冒号是指动态路由，id是自己取的，不是固定写法，
path: '/detail/:id',
component: Detail
},
{
path: '/cinema',
component: Cinema
},
{
path: '/center',
component: Center
},
然后在nowplaying中是：
这是是编程式导航的详细写法
<template>
<div>
nowplaying
<ul>
<li v-for="item in datalist" :key="item" @click=handleChangePage(item)>
{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
datalist:["11","22","33"]
}
},
methods:{
handleChangePage(id){
console.log(id)
// 编程式导航
// $router这个对象是指在main.js中注册了，然后相当于在整个vue实例中挂载了这样的一个对象的！！
// 然后push方法就是指定跳转到哪个页面
// 这里将id传到了detail这个页面中
this.$router.push(`/detail/${id}`)
}
}
}
</script>
这里的话是detail中的：
<template>
<div>
detail
</div>
</template>
<script>
export default {
mouted(){
console.log("要id获取详细信息",this.$route.params.id)
// 这里打印的对象this.$route是包含
//这里的id就是打印出11 22 33 这样的
}
}
</script>
小总结下就是：
1、列表中需要通过
r
o
u
t
e
r
将
i
d
给
传
过
去
，
2
、
r
o
u
t
e
r
配
置
中
需
要
将
i
d
作
为
一
个
动
态
路
由
3
、
在
d
e
t
a
i
l
页
面
中
要
通
过
router将id给传过去， 2、router配置中需要将id作为一个动态路由 3、在detail页面中要通过
router将id给传过去，2、router配置中需要将id作为一个动态路由3、在detail页面中要通过route来获取相对应的id
上面的是编程式导航中的跳转导航，还有一种是编程式导航中的命名导航，将这里
{
// 这样的话加冒号是指动态路由，id是自己取的，不是固定写法，
path: '/detail/:id',
//加上这句
name:'kenzi'
component: Detail
},
nowplaying中的这句改成：
this.$router.push(`/detail/${id}`)
改成：
this.$router.push(name:"kenzi",{id:id})
就是可以根据路由命名来写的了！
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
