Vue Router 学习笔记一

川长思鸟来 2023-02-19 14:23 139阅读 0赞

### Vue Router 学习笔记 一 ###

*  安装
 *  路由的基本用法
 *   *  加载路由组件
     *  项目根组件
     *  视图组件
     *  路由配置
 *  参考资料

# 安装 #

`--save-dev`安装包开发环境`简写 -D`

npm install vue-router --save-dev

再装一下几个要用的插件`element-ui`、`sass-loader` 和 `node-sass` 四个插件

# 安装 element-ui
    npm i element-ui -S
    # 安装 SASS 加载器
    npm i sass-loader node-sass -D

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

其实我是直接用 [Vue UI][] 创建的项目，记得选上`路由`和`样式加载器`就好了。

# 路由的基本用法 #

创建项目的模板已经实现了一个最基本的路由功能，我们来看一下吧

## 加载路由组件 ##

首选这是主js，所有的组件加载、实例化都是由此处开始的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]

## 项目根组件 ##

`<router-link>` 最终会变成两个`<a>标签`  
`to="/"` 就是路由要解析的路径。  
`<router-view/>` 用于给路由解析出来的组件占位。（此标签本身被替换掉）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]

## 视图组件 ##

两个简单的视图（页面），对应上面两个 `<a>标签`  
`Home.vue`的内容是从`HelloWorld.vue`加载进来的。  
`About.vue`内容就一个h1标签。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]

## 路由配置 ##

`Home.vue` 直接导入  
`About.vue` 懒加载  
[Vue.use(VueRouter)][Vue.use_VueRouter] ：路由插件是一个函数使用前要先调用一下。  
`path`：访问路径  
`name`：视图名  
`component`：路由到的组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 3]

# 参考资料 #

[Vue Router 官网][Vue Router]  
[Vue UI 学习笔记（基本操作）][Vue UI]

[Vue UI]: https://blog.csdn.net/jx520/article/details/106883745
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200621221231809.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200621222344984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200621224256345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[Vue.use_VueRouter]: https://cn.vuejs.org/v2/api/?#Vue-use
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020062123152715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[Vue Router]: https://router.vuejs.org/zh/