vue-router基本使用

最新推荐文章于 2022-09-06 17:55:52 发布

vision_seven7

最新推荐文章于 2022-09-06 17:55:52 发布

阅读量204

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/vision_seven7/article/details/108328823

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写目录标题

vue-router的实现原理

路由不同的页面也就是加载不同的组件。

路由的三个基本概念

router：它是一条路由，test按钮 => test内容，这是一条route，test1按钮 => test1内容，这是另一条路由。
routers：它是一组路由，把上面的每一条路由组合起来，形成一个数组。[{test按钮 => test内容}, {test1按钮 => test1内容}]。
router：它是一个机制，想当于一个管理者，它来管理路由。当用户点击test按钮时，router去routes中查找，找到对应的test内容。
客户端中的路由，实际上就是dom元素得显示和隐藏。当页面中显示test内容的时候，其他内容全部隐藏，反正也是一样

vue-router中的路由基于以上4点实现：

在vue中我们所有的内容都是组件化的，所有只需要把路径和组件对应起来，然后在组件中把页面渲染出来就可以了。

通过npm安装vue-router

npm install --save vue-router

在main.js中使用Vue.use（）加载插件

important Vue from 'vue
important VueRouter from 'vue-router'

Vue.use(VueRouter)

页面实现

在vue-router中，由两个标签和来对应点击和显示部分；就是定义页面中点击的部分，定义显示部分，就是在点击后匹配的内容显示在什么地方；还有一个非常重要的属性to，定义点击之后跳到哪里去。

路由配置

首先定义route，它是一个对象，由两部分组成：path、component；path指路径，component指组件；

const routes = [
  { path: '/home', component: Home },
  { path: '/list', component: List }
]

创建router对路由进行管理，由构造函数new vueRouter()创建，接收routes参数

const router = new VueRouter({
  routes: routes   // routers简写
})

配置完成后把router实例注入到vue根实例中，开始使用

const app = new Vue({
  router
}).$mount('#app') //相当于 el："#app"

执行过程
当点击router-link标签时，会寻找它的to属性，它的 to 属性和 js 中配置的路径{ path: ‘/home’, component: Home} path 一一对应，从而找到了匹配的组件，最后再把组件渲染到标签所在的地方。

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <b>vue-router的基本使用</b>
    <br>
    <br>
    <div id="app">
        <p>
            <!-- 
                router-link是vue-router提供的组件
                作用：让用户进行组件的切换  显示和隐藏
                跳转到哪个组件  是有to来控制
                router-link 最后被解析成了a标签  相当于tab栏切换里面的tab-bar
             -->

            <router-link to="/foo">易烊千玺</router-link>
            <router-link to="/bar">魏晨</router-link>
            <router-link to="/fa">神偷奶爸</router-link>

        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <!-- 相当于一个占位符  tab-content -->
        <router-view></router-view>
    </div>

</body>

</html>
<!-- vue必须在vue-router之前导入 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue-router是vue.js的插件  依赖于vue -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    /*
    路由
    后端路由   说的就是url和后端逻辑的对应关系
    前段路由   说的就是url和组件的对应关系
    router-link和router-view都是vue-router提供的组件
    */ 

    // 1. 定义 (路由) 组件。
    const Foo =Vue.component("foo",{ template: '<div><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2827900117,2392771513&fm=26&gp=0.jpg" /></div>' }) 
    const Bar =Vue.component("bar",{ template: '<div><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3886288723,4137600703&fm=26&gp=0.jpg" /></div>' }) 
    const Fa = Vue.component("fa",{ template: '<div><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2793086552,1942022292&fm=26&gp=0.jpg" /></div>' })

    // 2. 定义路由
    // 就是url跟组件的对应关系
    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar },
        { path: '/fa', component:Fa}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        // 这里使用的是简化赋值  所以key必须是routes
        // 传入路由规则
        routes // (缩写) 相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 将router对象和顶级vue实例化进行关联 ===> 挂载到顶级的vue实例上
    const app = new Vue({
        el : "#app",
        router
    })
    // .$mount('#app')  等同于 el ： "#app"
</script>

在这里插入图片描述

vision_seven7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router基本使用

这里写目录标题vue-router的实现原理路由的三个基本概念vue-router中的路由基于以上4点实现：通过npm安装vue-router路由配置案例vue-router的实现原理路由不同的页面也就是加载不同的组件。路由的三个基本概念router：它是一条路由，test按钮 => test内容，这是一条route，test1按钮 => test1内容，这是另一条路由。routers：它是一组路由，把上面的每一条路由组合起来，形成一个数组。[{test按钮 => test内容
复制链接

扫一扫

专栏目录