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: '
我是 Foo 组件
'
} const Bar = { template: '
我是 Bar 组件
'
} // 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>

Vue 路由 Vue-Router_第1张图片

你可能感兴趣的:(Vue)