Vue-Router基础学习笔记(小结)
程序员文章站
2022-05-25 22:45:21
vue-router是一个插件包,要先用npm进行安装
1、安装vue-router
npm install vue-router
yarn add vue-...
vue-router是一个插件包,要先用npm进行安装
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]
解耦合
routes: [ { path: '/user/:id', component: user, props: true }, // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项: { path: '/user/:id', components: { default: user, sidebar: sidebar }, props: { default: true, sidebar: false } } ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 真鳕鱼和银鳕鱼哪个好?选购时要注意