vue.js中的路由vue-router2.0使用

在我们平时工作中，我们有时候会有需求，按照不同的规则，加载不同的组件，页面不去跳转，常见的操作是ajax的异步操作，实现局部刷新加载新数据

在vue中，我们写了很多不同的组件，这时候，实现不刷新调用新组件，vue为我们提供了非常好用的一个插件，那就是路由

vue-router

 

我们首先去安装路由

在工具管理器里面我们直接敲命令

npm install vue-router --save

有些同学可能一开始不知道npm是什么东西，那么我们可以去下载vue-router文件到页面中去，像jquery一样引进就可以

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

 

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <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">
           <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
         <router-link to="/foo">1</router-link>
        <router-link to="/bar">2</router-link>
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
     </div>
 </body>
 <script>
     // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    // 2. 定义路由
    // 每个路由应该映射一个组件。 
    let routes=[
        {
            path:'/foo',
            component:Foo
        },
        {
            path:'/bar',
            component:Bar
        }
    ]
    // 3. 创建 router 实例，然后传 `routes` 配置
     let router = new VueRouter({
        routes
    });
    // 4. 创建和挂载根实例。
    const app=new Vue({
      router
    }).$mount('#app');
 </script>
</html>

 

posted @ 2017-07-14 15:48  八bug哥哥  阅读(891)  评论(0)  编辑  收藏  举报