html中使用vue-router

引入vue和vue-router

<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>

完整的示例


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>
<body>
    <div id="app">
        <h1>Hello !h1>
        <p>
          
          
          
          <router-link to="/hash1">切换至com1router-link>
          <router-link to="/hash2">切换至com2router-link>
        p>
        
        
        <router-view>router-view>
        
        
        
        
        
        
        
    div>
body>
<script>
    // 1. 定义(路由)组件。
    const com1 = { template: '
路由1
'
} const com2 = { template: '
路由2
'
} // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 通过 Vue.extend() // 创建的组件构造器, 或者,只是一个组件配置对象. const routes = [ { path: '/hash1', component: com1 }, { path: '/hash2', component: com2 } ] // 3. 创建 router 实例,然后传 `routes` 配置 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 要通过 router 配置参数注入路由,从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app');//el是自动挂载,mount是手动挂载(延时)
script> html>

你可能感兴趣的:(前端,#,Vue学习笔记)