vue中路由的认识

时间 2019-11-10

标签 vue 路由认识栏目系统网络繁體版

原文原文链接

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

　　路由容许咱们经过不一样的 URL 访问不一样的内容。该 URL 能够是咱们本身设置的,在项目中并无这样的文件夹,这种功能就是路由.html

　　路由的本质是hash值!vue

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

　　　　定 : 定义路由组件vue-router

　　　配 : 配置路由app

　　　　实 : 实例化路由模块化

　　　　挂 : 挂载路由spa

　　实例:3d

　　1. 在HTML中写入内容code

<!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>

　　路由传参

　　参数分为形参和实参,若是要在上面的实例中进行传参,只须要加入参数便可

　　实参:

　　路由嵌套

　　路由嵌套,就是把一个路由嵌套在另外一个路由当中,在vue中仍然是用router-link标签,但须要把嵌套的路由写在被嵌套路由的模板中

　　　　一样,子级也有子级的模板

　　　　　定义子级的路由

　　　　在配置子级时须要加参数 children

　　以上即是我对路由的认识!