vue-router基本用法

1546 查看

//HTML

<div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用指令 v-link 进行导航:值是$route对象 -->
        <a v-link="{ path: '/foo' }">Go to Foo</a>
        <a v-link="{ path: '/bar' }">Go to Bar</a>
      </p>
      <!-- 路由外链 -->
      <router-view></router-view>
    </div>

//JS

    
//引入Vue.js和Vue-router.js
    var Vue = require('vue');
    var VueRouter = require('vue-router');
//单独引用时,不必写下边的语句;
    Vue.use(VueRouter);

//用Vue构建一个根组件:--------路由器需要一个根组件
    var App = Vue.extend({});
    
//创建路由器实例:--------通过配置参数定制;
    var router = new VueRouter();

//定义路由规则:--------映射;
    router.map({
        //路径为“/”,初始时就会加载;
        '/':{
            //只需传入构建组件名;-------组件不需要注册(全局/局部);
            component: Foo 
        }
    })

//启动应用;------绑定一个App实例,并且挂载到选择器#app匹配的元素上;
    router.start(App,'#app');

嵌套路由:


//路由<router-view>嵌套在模板template中;

var Foo = Vue.extend({
  template:
    '<div class="foo">' +
      '<h2>This is Foo!</h2>' +
      '<router-view></router-view>' + // <- 嵌套的外链
    '</div>'
})

router.map({
  '/foo': {
    component: Foo,
    // 在/foo下设置一个子路由
    subRoutes: {
      '/bar': {
        // 当匹配到/foo/bar时,会在Foo's <router-view>内渲染一个Bar组件
        // 匹配不到,Foo的外链中不会渲染任何东西;
        component: Bar
      },
      '/':{
        component:'只要Foo被渲染,该模板都会被渲染'
      }
    }
  }
})