Vue 路由 Vue-Router

Vue 路由 Vue-Router

什么是路由

Vue Router 是 Vue 官方提供的路由管理器，他和 Vue 的核心深度集成，让构建单页面应用变得非常简单，通过根据不同的请求路径，切换显示不同组件进行渲染页面。

基本路由使用

安装路由

注意：使用路由首先要安装模块

npm install vue-router

引入 vue-router.js

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>

案例

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

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

<body>


    <div id="app">
        <div class="header">
            <h1>头部</h1>
        </div>
        <div class="left">
            <p>
            <ul>
                <li><a href="#/foo">go foo</a></li>
                <li><a href="#/bar">do bar</a></li>

                <!-- 官方推荐
                通过 router-link 标签默认会渲染出来 a 标签
                其中通过 to 属性来指定跳转的链接， 不用带上#号 -->
                <li>
                    <router-link to="/foo">go foo</router-link>
                </li>
                <li>
                    <router-link to="/bar">do bar</router-link>
                </li>
            </ul>
            </p>
        </div>
        <div class="main">
            主页面
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>

    <script>

        // 1. 定义组件
        const Foo = {
            template: '<div> 我是 Foo 组件 </div>'
        }
        const Bar = {
            template: '<div> 我是 Bar 组件 </div>'
        }

        // 2. 配置路由表：当点击指定的url的时候，显示对应的组件
        const router = new VueRouter({
            routes: [
                { path: '/foo', component: Foo },
                { path: '/bar', component: Bar }
            ]
        })


        new Vue({
            el: '#app',
            data: {

            },
            router  // router:router
        })
    </script>

</body>

</html>

在这里插入图片描述

posted @   叫我+V  阅读(137)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2019-07-29 angular 中引入 markdown
点击右上角即可分享
微信分享提示