vue中路由的认识

　　vue.js中路由的本质以及应用

　　路由允许我们通过不同的 URL 访问不同的内容。该 URL 可以是我们自己设置的,在项目中并没有这样的文件夹,这种功能就是路由.

　　路由的本质是hash值!

　　vue 中的路由设置分为四步曲 :

　　　　定 : 定义路由组件

　　　配 : 配置路由

　　　　实 : 实例化路由

　　　　挂 : 挂载路由

　　实例:

　　1. 在HTML中写入内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>路由设置</title>
        <!-- 在引入js文件时需要先引入vue.js  -->
        <script type="text/javascript" src="js/vue.js">    </script>
        <script type="text/javascript" src="js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!--  router-link 相当于超链接  -->
            <router-link to="/aa">主页</router-link>
            <router-link to="/bb">列表</router-link>
            <router-link to="/cc">尾页</router-link>
            <router-view>
                <!-- 用于盛放模块  -->
                
            </router-view>
        </div>
    </body>
</html>

　　2.模块化思想设置vue路由

<!--  模板  -->
<template id="home">
    <div>
        这是主页的内容!
    </div>
</template>
<template id="bb">
    <div>
        这是bb页的内容!
    </div>
</template>
<template id="cc">
    <div>
        这是cc页的内容!
    </div>
</template>
<script type="text/javascript">
    // vue 路由四部曲   定 配 实 挂
    // 定义路由组件
    let Home = {
        template:"#home",
    }
    let Bb = {
        template:"#bb",
    }
    let Cc = {
        template:"#cc",
    }
    // 配置路由
    let routs = [
        {path:"/aa",component:Home},
        {path:"/bb",component:Bb},
        {path:"/cc",component:Cc}
    ]
    
    // 实例化路由
    let router = new VueRouter({
        routes : routs  // routes 是固定的
    });
    
    // 挂载路由
    let app = new Vue({
        el:"#app",
        data:{},
        router:router // 固定的
    })
</script>