前端知识(二)08-Vue.js的路由-谷粒学院

目录

• 一、锚点的概念
• 二、路由的作用
• 三、路由实例
  • 1、复制js资源
  • 2、创建 路由.html
  • 3、引入js
  • 4、编写html
  • 5、编写js

一、锚点的概念

案例：百度百科

特点：单页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

3、引入js

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

4、编写html

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

5、编写js

<script>
    // 1. 定义（路由）组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
        el: '#app',
        router
    })

    // 现在，应用已经启动了！
</script>