6-1 vue-router、vue-cli和单文件组件-vue-router路由的使用

目录:

简介
基本用法
Router构造配置

一、简介

使用Vue.js开发SPA(Single Page Application) 单页面应用。

根据不同的url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用。

直接参考官网：Vue Router ，也可以通过 Vue.js的进入方式访问 Vue Router : Vue.js官网 -> 生态系统 -> 核心插件 -> Vue Router。

下载 vue-router：

https://unpkg.com/vue-router@2.0.0/dist/vue-router.js

npm方式：

npm install vue-router

二、基本用法(布局)

2.1、定义导航组件(router-link)和路由出口(router-view) => HTML

<div id="app">
    <div>
        <!--使用router-link组件定义导航，to属性指定连接url-->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/home">主页</router-link>
        <router-link to="/news">新闻</router-link>
    </div>
    <div>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</div>

注： router-link 组件最终在页面上显示的时候，还是会变成超链接<a>标签的，因为页面压根不认识<router-link>标签，to值指的是跳转到哪个组件。

2.2、实现用法步骤 => JavaScript

<!-- 导入vue.js 和 vue-router.js -->
<script type="text/javascript" src="../vue.js"></script>
<script src="../vue-router.js"></script>

<!--实现路由注册使用步骤-->
<script>
    //1.定义组件
    var Home = {
        template: '<h3>我是主页</h3>'
    };
    var News = {
        template: '<h3>我是新闻</h3>'
    };

    //2.配置路由
    const routes = [
        {path:'/home',component: Home}, //const表示定义常量，路由里面的每个对象都是一个路由
        {path:'/news',component: News}
    ];

    //3.创建路由实例
    const router = new VueRouter({ //路由实例来着vue-router.js中
      　　routes // (缩写) 相当于 routes: routes
    });

    //4.创建根实例并将路由挂载到Vue实例上
    new Vue({
        el: "#app",
        router  //(缩写) 相当于 router:router,实例告诉Vue实例，我有这么一个路由 }); 
</script>

完整代码如下：

<body>
    <div id="app">
        <div>
            <!--使用router-link组件定义导航，to属性指定连接url-->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由内容 -->
            <router-view></router-view>
        </div>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        //1.定义组件
        var Home = {
            template: '<h3>我是主页</h3>'
        };
        var News = {
            template: '<h3>我是新闻</h3>'
        };
    
        //2.配置路由
        const routes = [
            {path:'/home',component: Home}, //const表示定义常量，路由里面的每个对象都是一个路由
            {path:'/news',component: News}
        ];
    
        //3.创建路由实例
        const router = new VueRouter({ //路由实例来着vue-router.js中
          routes: routes // (缩写) 相当于 routes: routes
        });
    
        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            el: "#app",
            router:router  //可以简写为router,实例告诉Vue实例，我有这么一个路由
        });
    </script>
</body>

vue-router基本使用

以上只是 vue-router仅仅只是基础用法。接下来我们看下Router构造配置

三、Router构造配置

我们看了，上面知识vue-router基本使用，其实在路由配置和路由实例中还有很多的构造配置，根据这些配置，可以自定义一些我们想要的一些东西。Router 构建选项

3.1、mode

类型: string
默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
可选值: "hash" | "history" | "abstract"

配置路由模式:
- hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
- history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
- abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

因为在默认情况下，Router构造配置 mode 默认值值为 hash，所以在访问 router-link的时候会有 # 号，我们不想要这种 #号，我就就更改为 history模式。

//3.创建路由实例
const router = new VueRouter({ //路由实例来着vue-router.js中
    routes, 
    mode: 'history'  //由默认hash 改为 history，从而除去链接中的 # 号
});

3.2、linkActiveClass

类型: string
默认值: "router-link-active"

全局配置 <router-link> 默认的激活的 class。参考 router-link。

有些同学还不知道啥意思，好，那我们就把渲染后的 router-link在页面显示<a>标签给大家看一下：

<a href="/news" class="router-link-exact-active router-link-active">新闻</a>

如图:

不难看出显示的 <a> 标签自带两个class类 class="router-link-exact-active router-link-active" 但是并没有渲染任何样式，那我们可以自定义样式。

<head>
    <meta charset="UTF-8">
    <title>路由基本使用</title>
    <style>
        .router-link-active {
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
</head>

但是你觉得 router-link-active 名字太长了，你想自己定义，也可以，这个时候就用到我们的 linkActiveClass，在我们路由实例中构建选项中设置新的class名：

<style>
    /**
    .router-link-active {
        font-size: 20px;
        color:#ff7300;
        text-decoration: none;
    }
     */
    .active {
        font-size: 20px;
        color:#ff7300;
        text-decoration: none;
    }
</style>


//3.创建路由实例
const router = new VueRouter({ //路由实例来着vue-router.js中
    routes, // (缩写) 相当于 routes: routes
    mode: 'history',
    linkActiveClass: 'active' //把router-link-active 重新命名为active，更新活动链接的class类名
});

要注意，当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。查看 API 文档 学习更多相关内容。

3.3、配置默认路由

//2.配置路由
const routes = [
    {path:'/home',component: Home}, //const表示定义常量，路由里面的每个对象都是一个路由
    {path:'/news',component: News},
    {path:'*',redirect: '/home'}  //当匹配不到的视乎，直接匹配首页
];

posted @ 2020-03-17 10:09 帅丶高高阅读(292) 评论(0) 收藏举报

刷新页面返回顶部

极其内向的帅小伙