vue笔记-6 vue中router路由 路由参数的传递 嵌套路由

vue 专栏收录该内容
8 篇文章 0 订阅

Vue中的路由

VueRouter

路由:根据请求的路径按照一定的路由规则 进行的请求转发 从而帮助我们实现请求的管理

作用:在vue中实现组件的动态切换

在线引入路由的cdn:
`

`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <!-- 根据连接切换不同的路由组件 -->
    <a href="#/login">点我登录</a>
    <a href="#/register">点我注册</a>

    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //创建登录的组件
    const login = {
        template:" <div>  <h1>登录</h1>  </div> "
    };

    //创建注册的组件
    const register = {
        template:" <div>  <h1>注册</h1>  </div> "
    };

    //创建路由对象
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由规则  设置请求路径  path: 路由的路径  component:路径对应的组件
            {path:'/login',component:login},
            {path:'/register',component: register}
        ]
    });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //注册组件
            login,
            register
        },
        //注册路由对象
        router:route
    });

</script>


</body>
</html>



在这里插入图片描述

在这里插入图片描述在这里插入图片描述


router-link

作用:用来替换我们在切换路由时a标签切换路由 不需要手动加入 #

1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签

默认路由

path:'/' ,redirect:'/***'
作用:用来第一次接入界面所展示的一个默认的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <!-- 根据连接切换不同的路由组件 -->
    <!--router-link 好处:书写路由路径不需要# to: 用来书写路由路径 -->
    <router-link to="/login" >我要登录</router-link>
    <router-link to="/register" >点我注册</router-link>

    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //创建登录的组件
    const login = {
        template:" <div>  <h1>登录</h1>  </div> "
    };

    //创建注册的组件
    const register = {
        template:" <div>  <h1>注册</h1>  </div> "
    };

    const def= {
        template: " <div>  <h1>默认显示的组件</h1> </div> "
    };

    //创建路由对象
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由规则  设置请求路径  path: 路由的路径  component:路径对应的组件
            {path: '/' ,redirect:'/def'},
            {path:'/def',component: def},
            {path:'/login',component:login},
            {path:'/register',component: register}
        ]
    });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //注册组件
            login,
            register,
            def
        },
        //注册路由对象
        router:route
    });

</script>


</body>
</html>



在这里插入图片描述

在这里插入图片描述


路由中参数的传递

通过?号形式拼接参数 和 采用restful风格 拼接参数

使用? 形式拼接参数时
组件获取参数 $route.query.参数名

使用restful 传递参数时

路由规则:var router = new VueRouter({ routes:[ {path:'/register/:参数名/:参数名',component:组件对象} //定义路径中获取对应参数 ] });

组件获取参数 $route.params.参数名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

<!--    使用?拼接-->
    <router-link to="/login?id=999&name=小新" >我要登录</router-link>

<!--    使用restful风格-->
    <router-link to="/register/111/小白" >点我注册</router-link>

    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

    //创建登录的组件
    const login = {
        template:'<h1>用户登录{{ this.$route.query.id }} {{ this.$route.query.name }}</h1>',
    };

    //创建注册的组件
    const register = {
        template:'<h1>用户注册 {{ $route.params.id }} {{ $route.params.name }}</h1>',
        created(){
            console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
        }
    };


    const def= {
        template: " <div>  <h1>默认显示的组件</h1> </div> "
    };

    //创建路由对象
    const route = new VueRouter({
        // routes !!! 非 routers
        routes:[
            //路由规则  设置请求路径  path: 路由的路径  component:路径对应的组件
            {path: '/' ,redirect:'/def'},
            {path:'/def',component: def},


            {path:'/login',component:login},
            {path: '/register/:id/:name', component: register}

            
        ]
    });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        components: {
            //注册组件
            login,
            register,
            def
        },
        //注册路由对象
        router:route
    });

</script>


</body>
</html>







在这里插入图片描述


嵌套路由的使用

1.声明最外层路由和最内层路由
<template id="product">

    <div>

        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/del">商品删除</router-link>

        <router-view></router-view>

    </div>

</template>

创建路由对象含有嵌套路由

const router = new VueRouter({ routes:[ { path:'/product', //父组件的路径 component:product, //父组件 children:[ //子组件 {path:'add',component: add}, //子组件的路由路径 {path:'del',component: del}, ] }, ] });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由的使用</title>
</head>
<body>


<div id="app">


    <router-link to="/product">商品管理</router-link>
    <!--显示路由的组件-->
    <router-view></router-view>

</div>


<template id="product">

    <div>

        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/del">商品删除</router-link>

        <router-view></router-view>

    </div>

</template>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--vue 路由js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


<script>

   //创建最外层组件
   const product = {
      template:'#product',
   };


   const add = {
       template:'<h4>商品添加</h4>'
   };

   const del = {
       template:'<h4>商品编辑</h4>'
   };




   //定义路由对象
   const router = new VueRouter({
       routes:[
           {
               path:'/product',
               component:product,
               children:[
                   {path:'add',component: add},
                   {path:'del',component: del},
               ]
           },
       ]
   });

    //创建Vue实例
    const app = new Vue({
        el:"#app",
        data:{},
        methods: {},
        //注册路由对象
        router:router
    });

</script>


</body>
</html>







在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值