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

 npm install vue-router yarn add vue-router

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

   //你可以在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.push({path:'register',query:{plan:'cai'}})  //query查询参数 router.push({path:`/user/${userId}`})  //query router.push(location,onComplete,onAbort) router.replace()  //替换 router.go(-1) 

 //当前组件中只有一个 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  RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]  //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'<p>本文来源gao!%daima.com搞$代*!码9网(</p>, components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]