关于javascript:Vue-Router基础

一、起步

<div id="app">
      <!-- 应用 router-link 组件来导航，通过传入 to 属性指定链接，最终 router-link 会被渲染成一个 a 标签 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
      <div class="router-container">
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
      </div>
    </div>
    <script>
      //1、定义路由组件（引入路由组件）const Foo = {template: '<div class="foo"><h2>Foo</h2></div>'}
      const Bar = {template: '<div class="bar"><h2>Bar</h2></div>'}
      //2、定义路由
      const routes = [
        {
          path: '/foo',
          component: Foo
        },
        {
          path: '/bar',
          component: Bar
        }
      ]

      //3、创立 router 实例
      const router = new VueRouter({routes})

      let vm = new Vue({
        el: '#app',
        router
      })
</script>

二、动静路由
给路由门路设置参数

// 定义路由组件（或引入路由组件）const User ={template: '<div>User {{$route.params.id}}</div>',
  // 因参数发生变化，组件会复用，则组件生命周期钩子不会被调用，通过以下两种办法监测路由扭转
  // 办法一：应用 watch 监测 $route
  //watch:{//  $route(to,from){
  //    // 对路由变动做出响应
  //  }
  //} 
  // 办法二：beforeRouteUpdate(to,from,next){
    // react to route changes...
    // don't forget to call next()}
}
// 实例化 vue-router
const router = new VueRouter({
  routes:[
    {
      // 动静门路参数以：冒号结尾
      path: '/user/:id',
      component: User
    }
  ]
})

传入实参的办法

<!-- 申明式：应用 <router-link> 组件时，应用:to 动静绑定 -->
<router-link :to="{path:'/user/'+user.id}">Go to User</router-link>

// 编程式：应用 router.push 时
router.push({name: 'user',params: {id: user.id}})

三、嵌套路由
能够在路由组件中嵌套 <router-view> 标签，作为子路由的进口

// 定义路由组件
cosnt User = {
  template: `<div>
    <h2>User {{$route.params.id}}</h2>
    <router-view></router-view>
  </div>`
}
// 定义子路由组件
const UserProfile = {template: '<div>user profile</div>'}

应用 children 属性配置子组件

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

四、编程试的导航
1、router.push()
除了应用 <router-link> 创立 a 标签来定义导航链接，咱们还能够借助 router 的实例办法，通过编写代码来切换路由。
想要导航到不同的 url, 则应用 router.push()办法，该办法会向 history 栈增加一个新的纪录。
当点击 <router-link> 时，会在外部调用 router.push()办法，所以点击 <router-link :to=”…”> 等同于调用 router.push(…)

router.push()的参数取值如下：

// 字符串
router.push('home')

// 对象
router.push({path: 'home'})

// 命名的路由
router.push({name: 'user', params: { userId: '123'}})

// 带查问参数，变成 /register?plan=private
router.push({path: 'register', query: { plan: 'private'}})

若提供了 path, 则 name 会被疏忽。因而在定义带动静参数的路由时，若应用 params，则必须应用 name。to 也实用该规定。

router.push({name:'user',params: {user.id}})
router.push({path: `/user/${user.id}`})
// 上面的写法，params 不会失效
router.push({path:'/user',params:{user.id}})

2、router.replace()
跟 router.push()很像，惟一的区别就是它不会向 history 增加新纪录，而是跟它的办法名一样，替换掉以后 history 纪录
申明式：

<router-link :to="..." replace>

编程式：

router.replace(...)

3、route.go(n)
参数是一个整数，意思是在 history 纪录中向前或向后退多少步，相似 window.history.go(n)

五、路由命名
应用 name 属性给 route 命名，能够通过 name 链接到该路由

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

//...
// 应用 router.push()
router.push({name:'user',params:{userId:123}})

这两种办法都会把路由导航到 /user/123 门路

六、命名视图
当须要同级展现多个视图时，而不是嵌套展现时，例如创立一个布局，有 sidebar 和 main 两个视图，咱们能够在界面中领有多个独自命名的视图，应用命名来区别。

<router-view></router-view>
<router-view name='sidebar'></router-view>
<router-view name='mainView'></router-view>

多个视图就须要多个组件，确保正确应用 components

const router = new VueRouter({
  routes:[
    {
      path: '/',
      components: {
        // 未命名的默认为 default
        default: HeaderView,
        siderbar: Siderbar,
        mainView: MainView
      }
    }
  ]
})

七、重定向和别名
1、重定向 -redirect
重定向：当用户拜访 / a 时，url 会被替换成 /b, 而后匹配路由为 /b

const router = new VueRouter({
  routes: [
    {
      path: '/a',
      // 将门路从 '/a' 重定向到 '/b'
      //redirect: '/b',
      // 重定向的指标也能够是一个命名的路由
      //redirect:{name:'foo'}
      // 也能够是一个办法，动静返回重定向指标
      redirect: to => {
        // 办法承受指标门路作为参数
        //return 重定向的 字符串门路 / 门路对象
      }
    }
  ]
})

2、别名 -alias
若 / a 的别名是 /b，则当用户拜访 / b 时，url 会放弃 /b, 但路由匹配为 /a, 就像拜访 / a 一样。

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

八、路由组件传参
在组件中应用 $route 会使之与对应路由造成高度耦合，从而使组件只能在某些特定的 url 上应用。举荐应用 props 将组件和路由解耦

const User = {template: '<div>User {$route.params.id}</div>'  
}
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: User,
      props: true
    },
    // 对于蕴含命名视图的路由，必须为每个命名视图增加 props
    {
      path:'/user/:id',
      components:{
        default: User,
        sildebar: Sidebar
      },
      props:{
        default: true,
        sidebar: true
      }
    }
  ]
})

props 的取值：
1、布尔模式 - 如果 props 被设置为 true,route.params 将会被设置为组件属性
2、对象模式
如果 props 是一个对象，它会被按原样设置为组件属性

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

3、函数模式
能够创立一个函数返回 props, 这样能够将参数转换成另一种类型，将动态值与基于路由的值联合。

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

URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件。