第一个vue-router应用

用 Vue.js + vue-router 创建单页应用,是非常简单的。

  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>HelloWorldtitle>  
    <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 App!h1>
    <p>
      
      
      
      <router-link to="/foo">Go to Foorouter-link>
      <router-link to="/bar">Go to Barrouter-link>
    p>
    
    
    <router-view>router-view>
  div>
        <script> 
const Foo = { template: '
foo
'
} const Bar = { template: '
bar
'
} // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在,应用已经启动了!
script> body> html>

结果图
第一个vue-router应用_第1张图片
第一个vue-router应用_第2张图片

你可能感兴趣的:(vue,javascript框架,vue)