vue中路由的认识

叁歲伎倆 2023-07-01 11:52 15阅读 0赞

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

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

路由的本质是hash值!

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

定 :  定义路由组件

配  :  配置路由

实  :  实例化路由

挂  :  挂载路由

实例:

1. 在HTML中写入内容

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>路由设置</title>
            
            <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 to="/aa">主页</router-link>
                <router-link to="/bb">列表</router-link>
                <router-link to="/cc">尾页</router-link>
                <router-view>
                    
                    
                </router-view>
            </div>
        </body>
    </html>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

路由传参

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

![format_png][]

实参:

![format_png 1][]

路由嵌套

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

![format_png 2][]

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

![format_png 3][]

定义子级的路由

![format_png 4][]

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

![format_png 5][]

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

[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQ0ODA1OC8yMDE4MDcvMTQ0ODA1OC0yMDE4MDcyNDIwMzU0MTI4NS0yMDk2NjU1MjQyLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQ0ODA1OC8yMDE4MDcvMTQ0ODA1OC0yMDE4MDcyNDIwMzcwNTY0NS0xNjAwMTQxNjA1LnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQ0ODA1OC8yMDE4MDcvMTQ0ODA1OC0yMDE4MDcyNDIxMDA1NjQ1NS03MTI3NDc2ODkucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQ0ODA1OC8yMDE4MDcvMTQ0ODA1OC0yMDE4MDcyNDIxMDIwNzEzNi0yMDA4MTUzMjU0LnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQ0ODA1OC8yMDE4MDcvMTQ0ODA1OC0yMDE4MDcyNDIxMDMxOTExNC0xNzI1MjIzODMzLnBuZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTQ0ODA1OC8yMDE4MDcvMTQ0ODA1OC0yMDE4MDcyNDIxMDYwMzIwMS0xNTI4NTEyMjAxLnBuZw?x-oss-process=image/format,png