Vue 路由 Vue-Router_cvrouter-CSDN博客

本文链接：https://blog.csdn.net/weixin_42776111/article/details/107658349

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>

在这里插入图片描述