vue-router路由器的使用

一、 vue-router路由

　　1、简介

　　　　1、为什么要用vue-router

　　　　　　使用Vue.js开发SPA（Single Page Application）单页面应用

　　　　2、什么是单页面应用

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

　　　　3、安装

　　　　　　bower info vue-router //查看版本信息

　　　　　　cnpm install vue-router -S//安装

　　2、基本用法

　　　　1、布局

　　　　　　显示内容

　　　　2、配置路由

　　　　　　创建路由四步骤：定义组件》》》配置路由》》》创建路由实例》》》路由挂载

　　　　3、示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由基本用法</title>
    <style>
        /* .router-link-active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;//去除下划线
        } */
        .active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="itany">
        <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></router-view>
        </div>
    </div>

    <script>
        //1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var News={
            template:'<h3>我是新闻</h3>'
        }

        //2.配置路由(路径和组件之间的关系)
        const routes=[  //routes是个数组，数组里的每一个对象都表示一个路由
            {path:'/home',component:Home}, //路径home对应的组件内容是Home
            {path:'/news',component:News},
            {path:'*',redirect:'/home'} //重定向，如果都找不到路由匹配就默认显示/home页面
        ]

        //3.创建路由实例
        const router=new VueRouter({   //VueRouter就是/vue-router.js里的
            routes, //简写，相当于routes:routes
            // mode:'history', //更改模式，默认是hash模式，默认模式每个路径前面会有个#号
            linkActiveClass:'active' //更新活动链接的class类名，后期好给链接改css样式
        });

        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router //注入路由，相当于router：router
        });
    </script>
</body>
</html>

View Code