vue2进阶篇：安装路由

命令：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之缓存路由组件