Vue 学习笔记（四）

一、路由简单示例

　　HTML　

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

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

　　JavaScript

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 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 src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
  </p>
  <router-view></router-view>
</div>


const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

const app = new Vue({ router }).$mount('#app')

路径参数设置方式：

　　

 

 匹配优先级

按照定义顺序，匹配最合适的路由规则。

三、嵌套路由

　　代码示例：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },
                
        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

const app = new Vue({ router }).$mount('#app')

嵌套路由的定义和一般路由类似，1、子路由的出口要放到父组件中。2、在定义路由的时候，加入children这个对象，其值就是一个路由数组。

四、编程式的导航

　　路由的Html 页面导航方式：<router-link to=""></router-link>

　　编程的方式则是通过js代码触发这个定义和页面点击操作

　　转到页面的方式：router.push("路由信息")  或者router.replace("路由信息")  前者会在浏览器的栈中记录页面信息，可以进行后退操作，后者则不可以。

　　对于页面前进后退的操作 router.go(n) n是整数的话就前进n个页面，如果是负数则后退，如果栈中不存在，则操作失败，没有效果。

五、命名路由

　　给路由其一个名字，使用的时候根据名字指定。代码示例：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

使用：<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

六、命名视图

　　给视图起一个名字，路由的出口可以用该名字来指定，如果需要用默认的使用 default

　　代码示例：

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

<div id="app">
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/other">/other</router-link>
    </li>
  </ul>
  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
</div>

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {
        default: Baz,
        a: Bar,
        b: Foo
      }
    }
  ]
})

new Vue({
    router,
  el: '#app'
})

七、重定向和别名

　　1、重定向的的三种方式

　　从 /a 重定向 到 /b　

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

　　重定向到一个命名路由　

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

　　动态返回一个重定向目标

 

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

　　2、别名　

const router = new VueRouter({

  mode: 'history',

  base: __dirname,

  routes: [

    { path: '/root', component: Root, alias: '/root-alias' },

    { path: '/home', component: Home,

      children: [

        // absolute alias

        { path: 'foo', component: Foo, alias: '/foo' },

        // relative alias (alias to /home/bar-alias)

        { path: 'bar', component: Bar, alias: 'bar-alias' },

        // multiple aliases

        { path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] },

        // default child route with empty string as alias.

        { path: 'default', component: Default, alias: '' },

        // nested alias

        { path: 'nested', component: Nested, alias: 'nested-alias',

          children: [

            { path: 'foo', component: NestedFoo }

          ]

        }

      ]

    }

  ]

})

　　访问别名，可以访问内部的另一个真实存在的Path

八、路由组件传参

　　const User = {
 　　　　 template: '<div>User {{ $route.params.id }}</div>'
　　}
　　const router = new VueRouter({
 　　　　 routes: [
  　　  { path: '/user/:id', component: User }
　　　　  ]
　　})

　　这部分代码中的组件和$route耦合在一起，不能够让该组件得到重用，通过props方式可以是组件和$route 得到解耦。

　　代码示例：

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

 

　　1、布尔模式

　　如果 props 被设置为 true，route.params 将会被设置为组件属性

　　2、对象模式

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

 

　　3、函数模式

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})