image.png

命令: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版本。
image.png

问题:启动报错
image.png

答案:出现该情况的原因是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之缓存路由组件


刘大猫
1 声望1 粉丝

如果有天突然发现路的尽头还是路的话,希望你还没错过太多沿路的风景和眼前珍惜的人。