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

时间 2019-11-13

标签 vue.js vue 路由 router2.0 router 使用栏目 JavaScript 繁體版

原文原文链接

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

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

vue-router

咱们首先去安装路由jquery

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

npm install vue-router --savevue-router

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

<!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>