vue-router的使用
1.在使用vue-router时，路由的嵌套中，子路由不加/。因为以 / 开头的嵌套路径会被当作根路径。
如：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile', //这里的profile不要写成/profile,否则会被当做根路径
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
vue-router有两种使用方式：一种是<router-link to="home"></router-link>标签（官网上to前加了：to，但是我在实际项目中这样写报错，不加的时候正常），一种是编程式导航：
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：(在vue中通过this.$router获取router对象)
// 字符串
router.push('home') //push方法里的路径前不用加/,标签式的也不用加/
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
同样的规则也适用于 router-link 组件的 to 属性。
获取路由参数：
this.$route.query ；返回query参数对象
this.$route.params ;返回param参数对象
注意：是this.$route,不是$router
2.vue-router有两种路由，hash和history
hash:
通过hash进行路由匹配及跳转
history: （mode: 'history'）
没有#号，更像真的url。使用了h5的history api.
使用webpack-dev-server时，会将dist文件夹设置为静态文件夹，里面的资源都可以直接访问，如果使用hash路由,路由只会根据#后面的值来匹配路由。如果使用history 路由，路由会根据根目录后的路径进行路由匹配。
设置historyapicallback:true后会对所有匹配不到的请求（404）返回index.html文件，这样hash路由的#号前面无论是什么都会返回index.html页面，而history由于和真实路径一样，请求时虽然也会返回index.html页面，但是根路径后面的路径会和设置的路由匹配，匹配上才能正常显示，可以通过设置
在匹配不到的时候，匹配一个Notfound组件。
注意：webpack-dev-server是启动了一个express服务器，通过设置publicPath设置静态资源build文件夹的路径。默认情况下publicpath:"/",所以通过localhost:8080/可以直接访问build文件夹下的资源，如果设置为“/assets/“，则通过localhost:8080/assets/访问build文件夹下的资源。再通过设置historyapicallback:true可以让所有404请求都返回index.html页面，这样history类型的路由就可以正常刷新了。即使设置了publicpath值，history路由的匹配依然是从根路径开始匹配的（"localhost:8080/"),所以配置路由的时候要加上”/assets/".
module.exports = {
entry: {
app: ["./app/main.js"]
},
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets/",
//此时相当于/assets/路径对应于 build 目录，是一个映射的关系
filename: "bundle.js"
}
}
2.在vue组件化开发中，在mounted方法里可以直接写jquery的监听函数。如下（但是不能使用onclick="hello()"这种事件绑定方法），但是使用如下监听以后在各个组件中都有效果。
<script>
export default {
name: 'taskDetail',
mounted:function(){
$('body').click(function(){
alert("f");
});
$(window).scroll(function(){
})
},
methods:{
executeResult:function(){
this.$router.push('executeResult');
}
}
}
</script>
