Vue-Router基础学习笔记(小结)

npm install vue-routeryarn add vue-router

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)

<router-link to='/home'></router-link>  //你可以在template中使用它实现一个可点击跳转到home.vue的 a 标签this.$router.push('/about');  //在methods方法中跳转到about页面this.$router.go('-1');  //在js中返回上一个页面

this.$route.params.name  //在js中获取路由的参数.router-link-active  //当前选中路由的匹配样式$route.query  //获取查询参数$route.hash  //哈希

export default new Router({  routes:[    {        //第一层是顶层路由，顶层路由中的router-view中显示被router-link选中的子路由      path:'/',      name:'Home',      component:'Home'    },{      path:'/user/:id',  //www.xxx.com/user/cai      name:'user',  //:id是动态路径参数      component:'user',      children:[        {          path:'userInfo',  //www.xxx.com/user/cai/userInfo          component:'userInfo'  //子路由将渲染到父组件的router-view中        },{          path:'posts',          component:'posts'        }      ]    }  ]})Vue.use(Router);

//比如：用户一切换到用户二, 路由参数改变了，但组件是同一个，会被复用// 从 /user/cai 切到 /user/wan

//方法1：  watch:{    '$route'(to,from){      //做点什么，比如：更新数据    }  }//方法二：  beforeRouteUpdate(to,from,next){    //同上  }

router.push({name:'user',params:{userId:'123'}})  //命名路由导航到user组件<router-link :to='{name:'user',params:{userId:'123'}}'>用户</router-link>router.push({path:'register',query:{plan:'cai'}})  //query查询参数router.push({path:`/user/${userId}`})  //queryrouter.push(location,onComplete,onAbort)router.replace()  //替换router.go(-1)

//当前组件中只有一个 router-view 时，子组件默认渲染到这里<router-view class='default'></router-view><router-view class='a' name='left'></router-view><router-view class='b' name='main'></router-view>routes:[  {    path:'/',    components:{      default:header,      left:nav,      main:content  //content组件会渲染在name为main的router-view中    }  }]//嵌套命名视图就是：子路由+命名视图

const router = new VueRouter({  routes: [    { path: '/a', redirect: '/b' },    { path: '/b', redirect: { name: 'foo' }},  //命名路由方式    { path: '/c', redirect: to => {  //动态返回重定向目标     // 方法接收 目标路由 作为参数     // return 重定向的 字符串路径/路径对象    }}  ]})const router = new VueRouter({  routes: [    { path: '/a', component: A, alias: '/b' }  //别名：当访问 /b 时也会使用A组件  ]})

const User={  props:['id'],  template:`<div>{{id}}</div>`}const router = new VueRouter({  routes: [    { path: '/user/:id', component: User, props: true },      // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：    {      path: '/user/:id',      components: { default: User, sidebar: Sidebar },      props: { default: true, sidebar: false }    }  ]})

const router = new VueRouter({  mode: 'history',  routes: [    { path: '*', component: 404}  ]})

//Nginx  location / {   try_files $uri $uri/ /index.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>//Node.js  const http = require('http')  const fs = require('fs')  const httpPort = 80  http.createServer((req, res) => {   fs.readFile('index.htm', 'utf-8', (err, content) => {    if (err) {     console.log('无法打开index.htm页面.')    }    res.writeHead(200, {     'Content-Type': 'text/html; charset=utf-8'    })    res.end(content)   })  }).listen(httpPort, () => {   console.log('打开: http://localhost:%s', httpPort)  })  //使用了Node.js的Express  [使用中间件][1]

 routes: [  { path: '/user/:id', component: User, props: true },    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：  {   path: '/user/:id',   components: { default: User, sidebar: Sidebar },   props: { default: true, sidebar: false }  }  ]