1. 基本概念:
- route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
- routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
- router 是一个机制,相当于路由的管理者,当用户点击home 按钮,router 到routes 中去查找到对应的 home 内容,所以页面中就显示了 home 内容。
2. Vue路由实现过程
Vue的所有内容都是组件化的,把路径和组件对应起来之后利用router配对路径,渲染相应组件。
<router-link>``定义页面中点击的部分,``<router-view>
定义显示的部分。<router-link to="/home”>就定义了点击后去的页面。
-
一个路由route的组成分为两部分-path和component 前者指路径,后者是组件
-
多个路由组成一组路由routes
const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ]
-
由router对创建的路由进行管理,通过构造函数创建出router对象
const router =new VueRouter({routes})
-
配置完成后,将router实例注入到vue根实例中
const app = new Vue({ router }).$mount('#app')
当用户点击router-link标签时,就会去寻找它的to属性,to属性的路径与routes配置的path去相对应,从而找到匹配的组件,将组件渲染到
<router-view>
标签所在。router-link的本质为a标签,to属性对应a标签的href属性。
3. 路由重定向-常用于设置初始页面
例如使访问路径为/ 或为/login时都能访问到login页面,则routes配置如下
path:"/login",
component: login
path: '/',
redirect: '/login
如果不用重定向而直接pah:/ component:login,将会导致两个路径指向同一个组件,vue报错-存疑,一个路径不指向两个组件就行了呗?
2024.7.31