vuejs
vue router 路由介绍
日期：2018-08-31 阅读：1338
dmandwp系统 - wordpress系统和DM系统区块建站>>
进入网易云课堂播放 | 更多视频教程>
路由介绍： https://router.vuejs.org/zh/
可以通过vue ui来安装router的脚手架。
或者这样安装： npm install vue-router --save
https://www.jianshu.com/p/06d08ea39e31
import Vue from 'vue'
import Router from 'vue-router'
import hello from '@/components/HelloWorld'
import about from '@/components/About'
import contact from '@/components/Contact'
Vue.use(Router)
export default new Router({
routes:[ ---这个很重要，不能是router，必须是这个值。
{
path:'/',
name:'hello',
component:hello
},
{
path:'/about',
name:'about',
component:about
},
{
path:'/contact/:id/:age',
name:'contact',
component:contact,
props:true
}
]
})
{{$route.params.id}}
{{$route.params.age}}
----------
如果路由 props:true
则
export default {
props:[
'id','age']
}
{{id}}也可以输出。
路由的名称，路径，别名，跳转等
当你点击 <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>
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 />
--------------------