vue中路由的认识

  • Z时代
  • 2024-01-10
  • 分类：综合

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>

　　路由传参

　　参数分为形参和实参,如果要在上面的实例中进行传参,只需要加入参数即可

　　实参:

　　路由嵌套

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

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

　　　

　　　　　定义子级的路由

　　　　

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

　　　　

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

以上是 vue中路由的认识 的全部内容， 来源链接： utcz.com/z/377845.html

回到顶部