Vue.js的路由

布满荆棘的人生 2021-07-24 18:13 297阅读 0赞

# 一 锚点的概念 #

案例：百度百科

特点：单页Web应用，预先加载页面内容

形式：url\#锚点

# 二 路由的作用 #

Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）

# 三 路由实例 #

创建文件夹router\_pro

## 1 复制js资源 ##

vue.min.js

vue-router.min.js

## 2 创建 路由.html，我们的代码都写在这个文件中 ##

<!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>
        <div id="app">
            
            
            
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
            
            
            <router-view></router-view>
        </div>
        
        <script src="vue.min.js"></script>
        <script src="vue-router.min.js"></script>
        <script>
            // 定义视图组件
            // 复杂的组件也可以从独立的vue文件中引入
            const Welcome = { template: '<div>欢迎</div>' }
            const Student = { template: '<div>会员列表</div>' }
            const Teacher = { template: '<div>讲师列表</div>' }
    
            // 定义路由
            // 每个路由应该映射一个组件
            const routes = [
                { path: '/', redirect: '/welcome' }, //设置默认指向的路径
                { path: '/welcome', component: Welcome },
                { path: '/student', component: Student },
                { path: '/teacher', component: Teacher }
            ]
    
            // 创建 router 实例，然后传 routes 配置
            const router = new VueRouter({
                routes //（缩写）相当于 routes: routes
            })
    
            // 创建和挂载根实例，从而让整个应用都有路由功能
            new Vue({
                el: '#app',
                router
            })
        </script>
    </body>
    
    </html>

## 3 测试结果 ##

![20201122195837665.png][]

[20201122195837665.png]: /images/20210724/3dfccd30bdcf407cbfc904a30459673d.png