Vue-Router基础学习笔记-阿里云开发者社区

开发者社区> 哈你真皮> 正文

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.
+关注继续查看

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

4、经常用到

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

5、路由配置

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);

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-link :to='{name:'user',params:{userId:'123'}}'>用户</router-link>

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

router.push(location,onComplete,onAbort)
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
      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]


推荐文章: vue-router源码分析-整体流程
原文地址:https://segmentfault.com/a/1190000016679121

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python零基础学习笔记(五)—— 标识符
简单的说就是一串字符串(但字符串未必是标识符) 规则: 只能由子母/数字/下划线组成 开头不能是数字 不能是关键字['False', 'None', 'True', 'and', 'as', 'assert', 'async', 'await', 'break', 'class', 'conti...
1443 0
Python零基础学习笔记(四)——数据类型
python数据类型:Number(数字):包括整数/浮点数(小数)/复数String(字符串)Boolean(布尔值)None(空值)list(列表)tuple(元组)dict(字典)set(集合)
1233 0
Python零基础学习笔记(六)—— 变量和常量
变量: 程序可操作的存储空间的名称 程序运行期间可改变的数据 每个变量都有特定的类型 作用:将不同类型的数据存储到内存 定义变量:变量名 = 初始值(为了确定变量的类型,python里面可以直接识别数据类型 例如:age = 10) 数据的存储:变量名 = 数据值 特别注意:变...
1387 0
Python零基础学习笔记(三)——注释、输入和输出
单行注释# """多行注释多行注释......""" '''多行注释多行注释......'''print 打印到屏幕上一些信息,内容就是“”之间的print("这是第一个关于注释的文件") 2 .打印多个字符转,用逗号隔开,但遇到逗号会输出一个空格print("我","是","谁") 可以运算pr...
1472 0
Spring学习笔记之基础、IOC、DI(1)
0.0 Spring基本特性 Spring是一个开源框架;是基于Core来架构多层JavaEE系统 1.0 IOC 控制反转:把对象的创建过程交给spring容器来做。 1.1 applicationContext.xml beans 存放了很多个类 把一个类放入到spring容器中,该类就是bean 一个bean就
1296 0
Python零基础学习笔记(十八)—— break语句和continue语句
''' break语句: 作用:跳出for和while循环 注意:只能跳出距离他最近的那一层的循环 ''' for i in range(8): if i == 5: break print(i) ''' continue语句: 作用:跳过当前循环中的剩余语句 .
1237 0
Python零基础学习笔记(十九)—— 死循环
#死循环:表达式永远为真的循环 while 1: print("My name is jjking.") 执行结果会一直一直的打印 My name is jjking. My name is jjking.
1068 0
Python零基础学习笔记(十七)—— for 语句
''' for 语句,是一种循环语句 格式: for 变量名 in 集合: 语句 逻辑:按顺序取“集合”中的每个元素赋值给“变量”,再去执行语句 如此循环往复,直到取玩“集合”中的元素为止 ''' for i in [1,2,3,4,5]: print(i) '...
1193 0
+关注
355
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载