vue-router的基本介绍 | Serena = 阳光果苏 = 自律给我自由

# 如何使用脚手架搭建一套带路由的模板

1. 使用
vue create 项目名
新建项目
2. 在出来的选项中，选择手动模式
3. 出来10个选项，空格选择所需要的模块，然后回车
	因为我们的项目中需要使用router和less，所以我们还需要手动选择这两个。
    a、router：选择后接下来会问你是否要使用history模式（默认是hash模式），history模式的特点是跟普通的url一样。因为后期我们可以配置，所以这里选择no.
    b、css Pre-processors:这里选择css预处理器，我们选择less即可。
    接下来会有其他选择：
    c、Linter/Formatter:选择哪个自动化代码格式化检测.
      + ESLint with error prevention only(只检测错误)         
      + ESLint + Airbnb config 独角兽公司的Airbnb，有人评价说“这是一份最合理的javascript的编码规范”它几乎涵盖了js的各个方面
      + ESLint + Standard config    standardjs是一份强大的js编码规范，自带linter和自动代码纠正，没有配置，自动格式化代码，可在编码早起发现规范问题和低级错误
      + ESLint + Prettier    Prettier 作为代码格式化工具，能够统一整个团队的代码风格。
      如何选：
        如果是团队开发，且要约定代码风格，可以选择最后一个，如果是个人，可以选择第一个或第三个。
    d、选择语法检查方式  
      + Lint on save (保存就检测)   
      + Lint and fex on commit ( 用户提交文件到git的时候检测 ) 
      建议选择：Lint on save
    e、babel,postcss,eslint这些配置文件放哪？
      + in dedicated config files（在专用配置文件中，就是单独管理） 
      + in package.json（放在package.json里）
      建议选择第一项：in dedicated config files
    f、是否将以上这些保存为未来项目的预配置？ 
      + 如果你选择y那么下次搭建项目是就会出现你这一次配置的选项，也就是再次使用vue create指令时就会多一条选择
      建议：如果该配置是常用的配置，则可以选择Y,并起个名字。下次就不需要重新选择配置了。

4. 根据提示选择对应的子选项
5. 最后会问你是否要保存这个配置，以便下次新建项目时直接选择，不需要再来一次了
6. 回车下载

# 路由的概念

开发单页面使用需要路由，路由控制的就是 url 中的 hash 部分（即锚点部分，代表当前页面的对应部分），当 url 的 hash 部分改变后，则会载入对应的组件，从而显示该组件内容。

路由是指根据 url 分配到对应的处理程序。

vue-router（vue 的路由管理器）：

作用：通过管理 url，实现 url 和组件的对应和通过 url 进行组件的切换。即通过路由管理器实现 url 与 vue 组件的映射，访问特定的 url 就可以访问对应的 vue 组件。

通过路由，让单页面开发易如反掌。

单页面应用的好处：就如同tab切换页一样，第一次加载进来的资源会保存到本地，等加载其他组件时，在加载其他页面或组件时，不需要重新下载已经加载了的静态资源。特别是在手机端，用得很广泛。

一个 url 对应一个组件

一个 url 希望对应一个组件，比如：

http://localhost:8080/#/ —>home.uve

http://localhost:8080/#/about —>about.vue

http://localhost:8080/#/contact —>contact.vue

路由好比是一个 tab 切换页，上面是导航，下面是面板，面板对应的是组件。

通过路由来管理 url 是如何对应显示一个组件。

hash 模式 vue 的路由是通过控制 url 的 hash 部分来控制组件的，hash 部分改变了，会显示对应组件

# 路由需要的配置（如何写）

写 a 链接（使用 router-link 代替）指定 url 地址

写 router-view，告诉路由匹配到的组件渲染到什么位置

<router-view></router-view>
该标签中可以添加class名字，这样会带入到渲染进来的那个组件的根元素的class中，会与原来的className合并。
比如：
<router-view class="tc"></router-view>

写 router.js 配置这种关系，并将 router.js 导入到 main.js 中使用

参考 router.js

将 router.js 导入到 main.js 并在 vue 的实例中注册
1
2
3
4
5
new Vue({
el: '#app',
//这个也是Vue的一个葫芦娃兄弟
router
});

# 配置 router 对象

可以将默认的 hash 模式改为 history 模式

var router = new Router({
    mode:"history",
    //配置参数
    routes:[
        {   
            //访问什么url时要显示对应的组件
            path:"/home",
            component:home
        },
    ]
})

# ronter-link 的配置

1、to="/home" 表示目标路由的链接
可以改为动态绑定 :to=“home” home 来自组件的 data 数据，比如 home:"/home"
也可以改为对象的方式 :to="{path:’/home’}"
2、tag=“li” 指定渲染的标签，会监听导点击，触发导航，用来代替 a 链接，里面还可以放一个没有 href 的 a 链接，这样除标签外还会生成一个 a 链接
3、active-class=“cur” 设置链接激活时使用的 CSS 类名（只作用于当前链接会生效，如果要全局生效，需要写在路由对象的 routes 属性中，即 linkActiveClass:“自定义高亮 class”）
4、exact 开启 vue 严格匹配路由模式，不开启默认是全包含匹配模式，这样当是路由嵌套时，父级会一只高亮，添加该属性则不会
5、event=“click|mouseover” 更改默认触发链接的行为，默认是点击跳转，可以改为鼠标移入触发

# router.js 的配置

# 历史模式

1	mode:"history",//默认是hash模式，即锚点模式

# 命名路由

{
    // path表示url的访问路径
    // component表示url对应的那个组件
    path:'/',
        // 命名路由：
        // 用法：1、可以代替path
        //      2、在重定向时，直接使用name更方法
   name:'home',
   component:Home
},

# 嵌套路由

步骤：

在对应的要显示组件和链接的父组件中使用 router-link 和 router-view，如果要嵌套子组件，需要使用 children 配置，并且依然要在嵌套的组件中添加 router-link 和 router-view
在路由配置里使用 children 属性，值为数组，里面同父级写法，同时需要将该组件引入进来

{
    path:"/about",
    component:about,
        //配置子组件路由
        children:[
            {
                //假设把path路径留空，那么意味着访问该处就是默认子路由，访问about就默认显示了该study子组件
                path:"", //path:"study",
                name:about, //如果有默认子路由，则将这里的name改为父级的
                component:study
            },
            {
                path:"hobby", //假设不想带二级目录，而是像一级目录那样访问，可以在前面加个/,及'/hobby',然后在router-link中将to='/about/hobby' 改为to='/hobby'
                component:hobby
            }
        ]
},

# 重定向和别名

重定向

用户访问到一个错误地址时，自动跳转或定位到 404 页面

{
    //给其设置重定向（404）页面 *表示匹配所有的路径，除上面配置好的
    path:"*",
    component:notfound,
            //或使用重定向的4种用法
            // redirect:"/home"  
            // redirect:{path:"/home"},
            // redirect:{name:"home"},
            //函数的方式，就是动态重定向了，可以通过if语句根据不同的path切换到不同的页面
    redirect:(to)=>{
                console.log(to);
                if(to.path=="/abc"){
                    return '/home'
                }else if(to.path=='/123'){
                    return {path:'/document'}
                }else{
                    return {name:'About'}
                }
                //return '/home'
            }
}

别名

希望实现一个组件对应多个 url。

比如
http://localhost:8080/home

http://localhost:8080/index

都对应同一个 home 组件

{
    path:"/home",
    name:"Home",
    component:home,
   //给/home添加别名，这样访问 /index就相当于是访问/home组件，但要注意高亮问题，这时通过别名访问就不高亮了
    alias:'/index'
},

# 命名视图

原来是多个 url 对应一个组件，可以用别名。

一个 url 对应多个组件，即一个 url 匹配显示多个组件。就需要用命名视图。

步骤：

在默认的 router-view 中再新建一个 router-view, 并起一个名字

<router-view class="min-h-100"></router-view>
<!-- 假设要显示再显示一个组件，就需要再写一个roter-view -->
<!-- 即给该视图使用name命名 -->
<router-view name="sidebar" class="sidebar"></router-view>

在 router.js 中，对应的 url 配置路由中，比如要让 http://localhost:8080 / 显示 home 和 sidebar 组件，就需要在 path:’/' 中将 component 改为 components，写成对象的方式

{
    // path表示url的访问路径
    // component表示url对应的那个组件
    path:'/',
        // 命名路由：
        // 用法：1、可以代替path
        //       2、在重定向时，直接使用name更方便
        name:'home',
        // component:Home,//命名视图配置：原来是一个url显示到一个router-veiw中，现在想一个url对应显示两个组件
       components:{
          default:Home,
          sidebar:sidebar
       }
},

# router-view 的配置

命名视图

//默认视图
<router-view></router-view>
<!-- 即给该视图命名 -->
<router-view name="sidebar" ></router-view>

在 router-view 中写 class，会将该 class 合并到对应的组件的 class 中
1
<router-view class='tc'></router-view>

vue