vuejs

vue router 路由介绍

日期:2018-08-31 阅读:310


进入网易云课堂播放
    |    更多视频教程>

路由介绍:  https://router.vuejs.org/zh/

可以通过vue ui来安装router的脚手架。

--------------

路由的名称,路径,别名,跳转等
 
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。
 
重定向:  
routes: [
    { path: '/a', redirect: '/b' }
或  { path: '/a', redirect: { name: 'foo' }}
别名: { path: '/a', component: A, alias: '/b' }
  ]
----------
命名路由:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
或 : router.push({ path: `/user/${userId}` }) // -> /user/123
<router-view> </router-view>
如果不是动态的,用to即可,动态的,用 :to (多了个冒号。)
 
-----------
路由参数:
 
链接: <router-link to="/user/jason/33">jason</router-link> 
 
 定义: path: '/user/:username/:id',
 
 获取:  <h1> {{  $route.params }}  {{  $route.params.username }}  {{  $route.params.id }} </h1>
 
 注意一点: 路由参数只是单页客户端应用,如果刷新一下就会出错,这是因为还要后台web服务器的配置,要支持这种路由。
 
 -----------------
 命名视图: 一个视图对应一个组件。
 https://router.vuejs.org/zh/guide/essentials/named-views.html 
apache可以这样配置:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
参考: https://router.vuejs.org/zh/guide/essentials/history-mode.html 
 -----------
 路由嵌套:
 https://jsfiddle.net/L7hscd8h/19815/
 https://jsfiddle.net/22wgksa3/7552/
 
 const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/settings',
      // You could also have named views at tho top
      component: UserSettings,
      children: [{
      path: 'emails',
        component: UserEmailsSubscriptions
      }, {
      path: 'profile',
        components: {
        default: UserProfile,
          helper: UserProfilePreview
        }
      }]
    }
  ]
})
 
router.push('/settings')
-------------------
可以这样给嵌套路由链接: 

  <router-link :to="{ path: `/userdetail/${$route.params.id}/profile` }">profile</router-link><br />
    <router-link :to="{ path: `/userdetail/${$route.params.id}/posts` }">posts</router-link><br />

  --------------------

<<点击返回