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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值