27.Vue.js :路由

最新推荐文章于 2022-11-17 17:38:16 发布

屋顶上的小喵

最新推荐文章于 2022-11-17 17:38:16 发布

阅读量140

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/vivian_1122/article/details/88834271

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.路由初体验

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>路由router</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <!-- 1.引入路由文件 -->
    <script src="./vue-router.js"></script>
</head>
 
<body>
    <div id="app">
        <ul>
            <!-- vue路由中通过router-link去做跳转，它有一个to属性，to属性的值必须和
              path的路径相对应
              router-link将来会被渲染成为a标签，他的to属性会被渲染成a标签的href属性，
              但他的值前面会加一个#，变为锚点
             -->
 
            <li>
                <router-link to="/index">首页</router-link>
            </li>
            <li>
                <router-link to="/productType">水果</router-link>
            </li>
 
            <li>
                <router-link to="/productType">蔬菜</router-link>
            </li>
            <li>
                <router-link to="/productType">肉类</router-link>
            </li>
        </ul>
        <!-- 6.通过router-view挖坑，路径匹配到的组件都会渲染到这个坑里面来 -->
        <router-view></router-view>
    </div>
    <script>
        // 2.准备路由需要的文件
        var index = Vue.component('index', {
            template: '<div>首页</div>'
        })
 
        var productType = Vue.component('productType', {
            template: '<div>这里显示商品编号</div>'
        })
 
        // 3.创建路由对象，在这个对象里面去配置路由规则
        var router = new VueRouter({
            // 4.通过routes属性配置路由规则，它是一个数组，数组中放的是对象，每个对象对应一条规则，并且每个对象里面都包含有name（表示路由规则的名称）/path（表示路径）/component（表示路径对应的组件）
            routes: [{
                name: 'index',
                path: '/index',
                component: index
            }, {
                name: 'productType',
                path: '/productType',
                component: productType
            }]
        })
        var vm = new Vue({
            el: '#app',
            // 5.在vue实例中注入路由，这样整个应用程序都会有路由了
            router,
            data: {
 
            }
        })
    </script>
</body>
 
</html>

2.路由参数

HTML 中获取参数方法：


          <ul>
            <li>
                <router-link to="/index">首页</router-link>
            </li>
            <li>
                <router-link to="/productType/11">水果</router-link>
            </li>

            <li>
                <router-link to="/productType/22">蔬菜</router-link>
            </li>
            <li>
                <router-link to="/productType/33">肉类</router-link>
            </li>
           </ul>

           routes: [{
                // 路由加参数的方法：参数名
                name: 'index',
                path: '/index',
                component: index
            }, {
                name: 'productType',
                path: '/productType/:id',
                component: productType
            }]

        var productType = Vue.component('productType', {
            // 在html 中获取路由参数 通过$route.params 参数名
            template: '<div>这里显示商品编号{{$route.params.id}}</div>'
        })

JS 中获取参数方法：

       var productType = Vue.component('productType', {
            // 在html 中获取路由参数 通过this.$route.params 参数名
            template: '<div>这里显示商品编号{{$route.params.id}}</div>',
            // 在js中获取路由参数通过this.$route.params.参数名
            mounted() {
                console.log(this.$route.params.id)
            },
        })

屋顶上的小喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
27.Vue.js :路由

1.路由初体验<!DOCTYPE html><html lang="en"> <head> <title>路由router</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫