关于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 组件。