最后
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
//1.导入vue和vuerouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//2.调用Vue.use()函数,把VueRouter安装为Vue的插件
//vue.use()函数的作用，就是来安装插件的
Vue.use(VueRouter)
//3.创建路由的实例对象
const router = new VueRouter()
//4.向外共享路由的实例对象
export default router
导入并挂载路由模块
上面配置完后,需要让路由的js模块与main.js模块关联,因此需要到main.js里面配置如下代码:
//1.导入路由模块
//import routerjs from '@/router/index.js'
//import routerjs from '@/router/'
import routerjs from '@/router'
//以上三种方式均可以引入/router/index.js
//在模块化导入时,如果给定的不是具体的文件,而是文件夹,则默认导入这个文件夹下名为index.js的文件,文件名不是index.js是需要指定完整路径
//vue的实例对象
new Vue({
render: h => h(App),
//在Vue项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
router:routerjs//路由的实例对象
}).$mount('#app')
声明路由链接和占位符
先在父组件声明路由的连接和占位符
<template>
<div class="app-container">
<h1>App2 组件</h1>
<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>
<hr />
<!-- 只要在项目中安装和配置了vue-router，就可以使用router-view这个组件了 -->
<!-- 它的作用很单纯:占位符,和之前的component组件一样的作用 -->
<router-view></router-view>
</div>
</template>
点击上面每个链接,显示对应的组件
上面指明了路由链接和router-view后,需要在router/index.js,里面去配置对应的路由
//1.导入vue和vuerouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入需要的路由组件模块
import home from '@/components/Home.vue'
import movie from '@/components/Movie.vue'
import about from '@/components/About.vue'
//2.调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//3.创建路由的实例对象
//在路由实例上配置对应的路由模块
const router = new VueRouter({
//routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
routes:[
//在前面我们配置的路由带'#',但是在这里指定路由时不需要,带上'#'反而报错了
{path:'/home',component:home},
{path:'/movie',component:movie},
{path:'/about',component:about}
]
})
//4.向外共享路由的实例对象
export default router
最后,效果实现了:
此时已经可以点击每个链接进行组件的切换了
使用router-link替代a连接
<!-- 只要在项目中安装和配置了vue-router，就可以使用router-link来替代普通的a链接了 -->
<!-- 里面有个to属性和a标签的herf属性一致,有个优点就是不需要再写'#'了,直接写hash值就可以,例如下面 -->
<router-link to="/home">首页</router-link>
<a href="#/home">首页</a>
上面两种都是可以绑定指定路由的,但更推荐使用router-link
router-link本质就是a链接,可以查看控制台源代码
<a href="#/movie">电影</a>
<a href="#/about">关于</a>
redirect重定向
作用,路由是点击某个链接跳转的地址,当直接访问页面时候,由于没有点击操作,则页面无元素,使用重定向使页面访问时直接跳转到我们想要的页面
路由重定向指的是:用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向:
只需要在路由的配置文件index.js里面的routes里面加一行代码,代码如下:
//routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
routes:[
//path代表'/'路由地址,当访问这个地址时会重定向到'/home'路由地址
{path:'/',redirect:"/home"},
]
})
嵌套路由
声明子级路由链接和占位符
通过路由实现组件的嵌套展示，叫做嵌套路由。
在About.vue文件中设置好路由关系,这个文件相对于App.vue来说是父子关系,因此这个路由也是App.vue的子级路由,template代码如下,父级的模板代码参考上面的()即可
<template>
<div class="about-container">
<h3>About 组件</h3>
<!-- 子级路由链接,前面都要有共同的路由,后面各写各的 -->
<router-link to="/about/tab1">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>
<hr>
<!-- 子级路由占位符 -->
<router-view></router-view>
</div>
</template>
声明嵌套路由的规则
通过children属性声明子路由规则
在 src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则:
在index.js里面的代码配置如下
//导入子路由组件模块
import tab1 from '@/components/tabs/Tab1.vue'
import tab2 from '@/components/tabs/Tab2.vue'
//在路由实例上配置对应的路由模块
const router = new VueRouter({
//routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
routes:[
//相当于给了第三个参数children,里面存放子级路由,最前面的path为共同的路由名,后面为自己的路由,子路由的path里面不用写'/'
{
path:'/about',
component:about,
children:[
{path:'tab1',component:tab1},
{path:'tab2',component:tab2}
]}
]
})
配置完以后子级路由就能正常去切换了
设置默认显示的子路由方法(还是重定向,加个单词即可)
在index.js里面的代码配置如下
//导入子路由组件模块
import tab1 from '@/components/tabs/Tab1.vue'
import tab2 from '@/components/tabs/Tab2.vue'
//在路由实例上配置对应的路由模块
const router = new VueRouter({
//routes是一个数组,作用:定义'hash地址'与'组件'之间的对应关系
routes:[
//相当于给了第三个参数children,里面存放子级路由,最前面的path为共同的路由名,后面为自己的路由,子路由的path里面不用写'/'
{
path:'/about',
component:about,
//redirect:'/about/tab1'//默认显示的子路由的第一种方法
children:[
//默认子路由:如果children数组中，某个路由规则的 path值为空字符串，则这条路由规则，叫做“默认子路由”
//默认显示的子路由的第二种方法
{path:'',component:tab1},
{path:'tab1',component:tab1},
{path:'tab2',component:tab2}
]}
]
})
动态路由
动态路由匹配(基本用法)
缺点:路由规则的复用性差。
动态路由指的是:把 Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在vue-router中使用英文的冒号(:）来定义路由的参数项。示例代码如下:
//路由中的动态参数以︰进行声明，冒号后面的是动态参数的名称
{path:'/movie/:id',component:Movie}
//将以下3个路由规则，合并成了一个，提高了路由规则的复用性
{path:'/movie/1',component:Movie}
{path:'/movie/2',component:Movie}
{path:'/movie/3',component:Movie}
路由链接代码为
<router-link to="/movie/1">洛基</router-link>
<router-link to="/movie/2">雷神</router-link>
<router-link to="/movie/3">复联</router-link>
效果图
点击谁显示谁的路由地址
需求:在Movie 组件中，希望根据id的值，展示对应电影的详情信息
第一种方式
在Movie.vue组件中打印一下this
点击展开route(不带r的,最短的这个)
展开结果如图:
this $route是路由的“参数对象”
this. $router 是路由的“导航对象”
这个params里面的对象就是我们的路由携带的动态参数,获取的话通过 ----this.$route.params.动态参数----来获取(其中最前面的this.可加可不加,不加的话也没影响)
第二种方式
为路由规则开启props传参
在router/index.js里面配置如下(完整的往上翻,这里就简单写最重要的一行)
//props:true代表为当前路由规则开启props传参,从而很方便地拿到动态参数的值
//没有动态参数的不建议加props,因为无意义,没什么用
{path:'/movie/:id',component:Movie,props:true}//id为动态参数
在movie.vue的导出里面定义props自定义属性,代码如下:
<script>
export default {
props:['id']//这个id值为路由的动态参数,需要和路由的动态参数保持一致
}
</script>
此时已经拿到数据了,可以使用了,查看方式如下:
<template>
<div>
{{ id }}//此时就可以展示我们动态绑定的参数值
</div>
</template>
拓展query和fullPath
注意:在 hash地址中,/后面的参数项，叫做“路径参数"
在路由“参数对象”中，需要使用this. $route. params来访问路径参数
注意2:在 hash地址中,'?'后面的参数项,叫做“查询参数”
在路由“参数对象”中,需要使用this.$route. query来访问查询参数
注意3:在 this.$route中,path只是路径部分;fullPath是完整的地址
<router-link to="/movie/1">洛基</router-link>
<router-link to="/movie/2?username=zs&age=20">雷神</router-link>
### 最后
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
e/2?username=zs&age=20">雷神</router-link>
### 最后
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
[外链图片转存中...(img-AiZQLnuF-1715839689339)]
[外链图片转存中...(img-16AajAXs-1715839689340)]
[外链图片转存中...(img-TXotjC3n-1715839689341)]
[外链图片转存中...(img-zFxu1mf7-1715839689341)]
扫一扫
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
