点击蓝字 关注我们

                        Vue Router

        一. 安装

        二. 导入

        三. 说明

        四. 使用

  4.1 静态页面跳转

                    4.2 动态页面跳转

                    4.3 子路由

                    4.4 通过程序传参

                    4.5 同时(同级)展示多个视图

                    4.6 导航钩子

壹·安装

·shell

cnpm i vue-router -S

贰·导入

·js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

叁·说明

①http地址中'#'号之后的部分表示router地址

②router-link:会变为标签, 最好用div包裹起来

·html

③router-view:用于渲染

肆·使用

4.1静态页面跳转

·定义路由

·js

var routes = [
   {
       path: '/',
       component: {
           template: `

var router = new VueRouter({
   routes: routes
});
var vm = new Vue({
   el: '#app',
   router: router
});·html

·点击router-link连接, 就会调整到对应的router-view页面

4.2动态页面跳转

·param方式

·js

{
   path: '/usr/:name',
   component: {
    template: `

·queryString方式:to属性可以传递queryString

·html

{
   path: '/usr/:name',
   component: {
       template: `

4.3子路由

·使用append实现子路由:append标记后, to内容会被追加到当前route下面

·html

·js

{
   path: '/usr/:name',
   component: {
       template: `

画外音

排版有限，明日更新4.4-4.6

                    4.4 通过程序传参

                    4.5 同时(同级)展示多个视图

                    4.6 导航钩子

我知道你“在看”哟～