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页面，但是根路径后面的路径会和设置的路由匹配，匹配上才能正常显示，可以通过设置

{

path:"*",

component:Notfound

}

在匹配不到的时候，匹配一个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>