vue路由，动态路由，嵌套路由

夜空孤狼啸

已于 2023-04-12 11:34:13 修改

阅读量906

点赞数

分类专栏： Vue 文章标签： vue-router 动态路由嵌套路由组件路由配置

于 2022-04-21 22:15:42 首次发布

夜空孤狼啸

本文链接：https://blog.csdn.net/qq_43940789/article/details/124333114

版权

Vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

vue路由
vue动态路由匹配
嵌套路由

vue路由

        vue是一个单页面应用  我们页面其实是由组件组成  我们想要是要页面到页面之间跳转
        我们只能通过vue组件进行模拟页面之间跳转  
        跳转过程 我们就需要使用vue-router

        使用：
            1 使用npm安装
            npm install vue-router --save-dev
            2 使用cdn进行外部引入
            https://unpkg.com/vue-router@3.0.0/dist/vue-router.js

        vue中组件分为两种
            1 普通组件
            2 路由组件

            区别：
                普通组件需要注册(全局 局部)
                路由组件不需要可以直接使用

            普通组件和路由组件区分
                在路由中配置的组件  都是路由组件  剩余的全部普通组件

        vue路由配置流程
            1 创建组件配置对象
            2 路由配置
            3 创建路由配置对象
            4 将router添加到new vue中
            5 在组件模板中添加router-view组件  对应的路由组件就会被渲染到router-view组件中

eg：

<body>
    <!-- 
        vue路由
            vue是一个单页面应用  我们页面其实是由组件组成  我们想要是要页面到页面之间跳转
            我们只能通过vue组件进行模拟页面之间跳转  
            跳转过程 我们就需要使用vue-router

            使用：
                1 使用npm安装
                npm install vue-router --save-dev
                2 使用cdn进行外部引入
                https://unpkg.com/vue-router@3.0.0/dist/vue-router.js

            vue中组件分为两种
                1 普通组件
                2 路由组件

                区别：
                    普通组件需要注册(全局 局部)
                    路由组件不需要可以直接使用

                普通组件和路由组件区分
                    在路由中配置的组件  都是路由组件  剩余的全部普通组件

            vue路由配置流程
                1 创建组件配置对象
                2 路由配置
                3 创建路由配置对象
                4 将router添加到new vue中
                5 在组件模板中添加router-view组件  对应的路由组件就会被渲染到router-view组件中
     -->

     <div id="app">
         <!-- router-link 相当于html中a标签  to属性相当href -->
        <router-link to="/list">列表</router-link>
        <router-link to="/detail">详情</router-link>
         <!-- 匹配到路由组件最终显示的地方 -->
        <router-view></router-view>
     </div>
     <script src="vue.js"></script>
     <script src="vue-router.js"></script>
     <script>
        //  1 创建组件配置对象
         const list={
             template: `
                <div class="list">列表页</div>
             `
         }
         const detail={
             template: `
                <div class="detail">详情页</div>
             `
         }
        //  2 路由配置
        const routes=[
            {
                path: '/list',  // 自定义的路由跳转路径
                component: list
            },
            {
                path: '/detail',
                component: detail
            }
        ]
        // 3 创建路由配置对象
        const router=new VueRouter({
            // routes: routes
            routes
        })
        // 4 把router挂载到new Vue实例中
         new Vue({
             el: "#app",
            //  router: router,
             router,
             data: {

             }
         })
     </script>
</body>

vue动态路由匹配

        当多个path路径需要指向同一个路由组件的时候  我们就可以使用动态路由匹配
        两个路由地址
        routes中的path：后要加   ：id（自定义）

const routes=[
             {
                 path: '/',
                 component: list
             },        
            {
                path: '/list/:id',   // 当前的路由中的 :id代表的是一个动态值  可以匹配 /list/1 /list/2  /list/name
                component: detail
            }
         ]

嵌套路由

        一个路由组件中  嵌套并渲染了一个新的路由组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        嵌套路由
            一个路由组件中  嵌套并渲染了一个新的路由组件  
     -->
     <div id="app">
        <router-view></router-view>
     </div>
     <script src="vue.js"></script>
     <script src="vue-router.js"></script>
     <script>
         const user={
             template: `
                <div class="user">
                    user
                    <router-view></router-view>
                </div>
             `
         }
         const profile={
             template: `
                <div class="profile">
                    profile
                    <router-view></router-view>
                </div>
             `
         }
         const posts={
             template: `
                <div class="posts">posts</div>
             `
         }
         const item={
             template: `
                <div class="a">a页面</div>
             `
         }
         const routes=[
             {
                 path: '/user/:name',  // /user/foo   /user/bar
                 component: user,
                 children: [
                     {
                         path: 'profile',   // /user/:name/profile
                         component: profile,
                         children: [
                             {
                                 path: 'name',  // /user/:name/profile/name
                                 component: item
                             }
                         ]
                     },
                     {
                         path: 'posts', // /user/:name/posts
                         component: posts
                     }
                 ]
             },
         ]
         const router=new VueRouter({
             routes
         })
         new Vue({
             el: "#app",
             router,
             data: {

             }
         })
     </script>
</body>
</html>

夜空孤狼啸

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue路由，动态路由，嵌套路由

vue路由 vue是一个单页面应用我们页面其实是由组件组成我们想要是要页面到页面之间跳转我们只能通过vue组件进行模拟页面之间跳转跳转过程我们就需要使用vue-router 使用： 1 使用npm安装 npm install vue-router --save-dev 2 使用cdn进行外部引入 https://unpkg.com
复制链接

扫一扫