Vue--Router(路由)

news2024/9/21 14:43:35

一 Router(路由)

1.作用

2.实现步骤

3.注意

一 Router(路由)

1.作用

Router又叫做路由，简单来说，就是用来实现vue的页面之间跳转的。

我们都知道，使用vue必然会涉及到很多个组件，也就是页面，而页面之间肯定需要切换，比如我点击一个按钮就需要切换另外一个组件(页面)，这就是路由的作用。

而且我们以前学过重定向等，也是页面跳转，我觉得区别就在于，路由是局部的页面切换。就是不会改变url重新加载一个网页，而是在一个网页上面显示不同的组件，你甚至可以控制这个新的页面切换在哪个位置。

2.实现步骤

①首先你需要创建一个vue/vite项目，然后在终端下载router
# npm安装
npm i vue-router
#yarn安装
yarn add vue-router
下载完成后，你可以在你的项目的node_modules目录下面看见vue-router目录：

② 你需要在src目录下面创建一个router文件夹，再在router文件夹下面创建一个index.js文件

③ 然后你需要在index.js文件中配置路由的信息，包括导入，配置组件路径，暴露路由等步骤，这这里我将简化后的模板总结出来了，可以直接导入按需求做修改
//vue-router配置文件
//1.从vue-router导入createRouter() 创建路由器对象
import { createRouter, createWebHistory, createWebHashHistory} from 'vue-router'

//2.配置路由规则: 给组件绑定url
const routes = [
    //默认路由
    {
        path:'/',
        //重定向
        redirect:'/index'
    },
    {
        path: "/index",
        component: ()=>import('../views/index.vue'),
        name:'indexPage',
        children:[  //配置子级路径
            {
                // 这是resful风格的url写法
                path:'/infor/:id' , 
                component:  ()=>import('../views/information.vue'),
                name:'infor',
            },
        ]
    },
    
    //配置404的组件
    {
        path:'/:pathMatch(.*)*', 
        component:  ()=>import('../views/NotFound.vue'),
        name:'notFound',
    }
];

//3.创建路由器对象
const router = createRouter({
        routes,  //路由规则
        history:  createWebHashHistory(),
        linkActiveClass:'active'
    });
//4. 把路由器对象暴露出去  其他组件文件,导入
export default router;
其实1，3，4步都是一样，就第二步配置路由需要按照自己修改，所以这里解释一下这里面的信息：

④ 在main.js文件里面导入router并且挂载。

⑤ 我们在src目录下面创建一个views文件夹，在下面创建我们需要的vue组件

⑥ 最后我们就可以按照需求通过路由实现各种组件的切换