vue-router 路由

最新推荐文章于 2024-12-12 17:17:57 发布

原创最新推荐文章于 2024-12-12 17:17:57 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

46 篇文章

订阅专栏

本文详细解析了Vue Router中核心概念Route、Routes和Router的作用与使用方法，阐述了它们如何协同工作实现页面导航，包括下载、引入、配置及在Vue应用中的实际运用。

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。

路由中有三个基本的概念 route, routes, router。

1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。

2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

使用方式（注意第3，6不要忘记了。）


    - 1:下载 npm i vue-router -S
    - 2:在main.js中引入 
        import VueRouter from 'vue-router; 
        import Home from "../component/home.vue;
    - 3:安装插件 Vue.use(VueRouter);
    - 4:创建路由对象并配置路由规则
    	let router = new VueRouter({ 
    	routes:[
	       {name : "home",path:'/home',component:Home},
	       {name : "nav",path:'/nav',component:Nav}
    	]});
    - 5:将其路由对象传递给Vue的实例，options中
        + options中加入管理者 router:router
    - 6:在app.vue中留坑  <router-view></router-view>
        - 前面的component内容会填充到坑中