Vue-Router基础学习笔记

1、安装vue-router

npm install vue-router
yarn add vue-router

2、引入注册vue-router

import Vue from \'vue\'
import VueRouter from \'vue-router\'

Vue.use(VueRouter)

3、链接跳转

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

4、经常用到

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

5、路由配置

export default new Router({
    routes:[
        {                //第一层是顶层路由，顶层路由中的router-view中显示被router- 选中的子路由
            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);

6、路由参数方式变化时，重新发出请求并更新数据

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

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

7、编程式导航

router.push({name:\'user\',params:{userId:\'123\'}})    //命名路由导航到user组件
<router-  :to=\'{name:\'user\',params:{userId:\'123\'}}\'>用户</router- >

router.push({path:\'register\',query:{plan:\'cai\'}})    //query查询参数
router.push({path:`/user/${userId}`})    //query

router.push(location,onComplete, )
router.replace()    //替换
router.go(-1)

8、命名视图

//当前组件中只有一个 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中
        }
    }
]
//嵌套命名视图就是：子路由+命名视图

9、重定向与别名

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组件
    ]
})

10、路由组件传参

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 }
        }
    ]
})

11、HTML5的History模式下服务端配置

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
      Rewrite  /
      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]

来源：https://segmentfault.com/a/1190000016679121