vue2进阶篇：安装路由

2024-10-13 8

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue2进阶篇：安装路由

命令：npm i --save vue-router@3

注意点1：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中，结构简单使用方便，但是只能放在\标签中使用结合to属性使用，to属性代表往哪跳，\标签会将路由转成\标签，通过点击跳转路由，因此局限性也非常大。
编程式路由导航：需要写在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,
        }
    ]
})