命令:npm i --save vue-router@3
<font color='red'>注意点1:</font>2022年2月7日以后,vue-router的默认版本,为4版本。
其中vue-router4,只能用在vue3中
而vue-router3,只能用在vue2中。
如果把vue-router4强行安装到vue2中,会报错如图,所以我们应安装vue3版本。
问题:启动报错
答案
:出现该情况的原因是vue-router安装的版本太高,一般vue2的项目对应的版本是vue-router@3版本就可以。
5.1配置路由
项目当中配置的路由一般放在router文件夹中
5.2总结
路由组件与非路由组件的区别:
(1)路由组件一般放置在pages|views文件夹中,非路由组件一般放置在components文件夹中。
(2)路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用。
(3)注册完路由,不管是路由组件还是非路由组件,身上都有 $route和$router属性。
(4)$route
:一般是获取路由信息(比如路由的路径、query参数、params参数等)。
$router
:一般进行编程式导航进行路由跳转(比如push|replace)。
5.3路由的跳转
路由的跳转有两种形式:
声明式导航router-link,可以进行路由的跳转
编程式导航push|replace,可以进行路由的跳转
编程式导航:声明式导航能做的,编程式导航都能做,但是编程式导航除了可以进行路由跳转,还可以做一些其他的业务逻辑。
问题1
:编程式路由、声明式路由是什么?
答案
:
- 声明式路由导航:直接写在html中,结构简单使用方便,但是只能放在\<router-link>标签中使用结合to属性使用,to属性代表往哪跳,\<router-link>标签会将路由转成\<a>标签,通过点击跳转路由,因此局限性也非常大。
- 编程式路由导航:需要写在js中,结构也不算复杂,优势在于非常灵活,不受固定标签限制,可以在任意情景下转跳路由。
问题2
:如何选择编程式路由、声明式路由呢?
答案:“声明式导航”只能进行路由跳转,而编程式导航除了可以完成路由跳转外,还能做一些业务逻辑处。比如登录页输入用户名+密码,这里当点击“登录”按钮时肯定不能直接跳转页面,得ajax向后端发请求验证用户名和密码是否正确等,这时就需要使用编程式路由了。
问题3
:编程式导航中push和replace有啥区别?
答案
:
- push模式是栈的常规模式,可以回到上一级,会留下痕迹
- replace模式是替换模式,会替换掉栈顶的路由,回不到上一级,不会留下痕迹(无痕模式),适用于登录后,不需要重新回到登录页。
问题4
:想实现url默认输入https://localhost:8080就能自动跳转到首页,代码如下,但是无效
router文件夹下的index.js文件
//引入vue-router路由插件
import VueRouter from "vue-router";
//引入Vue
import Vue from "vue";
Vue.use(VueRouter);
//引入路由组件
import Register from '@/pages/Register'
import Login from '@/pages/Login'
import Home from '@/pages/Home'
import Search from '@/pages/Search'
//配置路由
export default new VueRouter({
routes:[
{
path: '/home',
component: Home,
},
{
path: '/search',
component: Search,
},
{
path: '/register',
component: Register,
},
{
path: '/login',
component: Login,
},
//重定向,在项目跑起来的时候,访问/,立马让他定向到首页
{
path: '*',
redirect: Home,
}
]
})
答案
:redirect属性后面跟的应该是路径而不是组件的名称,所以应该修改为:redirect: “/search”就是正确答案。
本人其他相关文章链接
1.《vue2进阶篇:路由》第10章:vue-router,包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
2.vue2进阶篇:安装路由
3.vue2进阶篇:vue-router之基础路由
4.vue2进阶篇:vue-router之嵌套(多级)路由
5.vue2进阶篇:vue-router之路由的query参数
6.vue2进阶篇:vue-router之命名路由
7.vue2进阶篇:vue-router之路由的params参数
8.vue2进阶篇:vue-router之路由的props配置
9.vue2进阶篇:vue-router之router-link的replace属性
10.vue2进阶篇:vue-router之编程式路由导航
11.vue2进阶篇:vue-router之缓存路由组件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。