Vue小知识点

动态路由

• 动态路径参数（path: ‘/user/:id’），
  一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
  几个路由渲染同个组件，组件实例会被复用，不过，这也意味着组件的生命周期钩子不会再被调用。
• 匹配优先级
  有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由

• children配置

 routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome }
      ]
    }
  ]

编程式导航

• 在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。（router.push(location, onComplete?, onAbort?)）
  点击 <router-link :to="..."> 等同于调用 router.push(...)。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})


const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效（有path， params会被忽略）
router.push({ path: '/user', params: { userId }}) // -> /user

• router.replace(location, onComplete?, onAbort?)不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
• router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
• 还有值得提及的，vue-router 的导航方法 （push、 replace、 go） 在各类路由模式（history、 hash 和 abstract）下表现一致。

命名视图

• 当界面有导航和主体，通常主体由router-view导入 ，但是如果我们的主体不止一个，也就是说界面中拥有多个单独命名的视图，我们就可以用

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

当name为空 默认为default

重定向和别名

• 重定向即访问/a跳转到/b，重定向的几种方法

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

• 别名即访问/a 显示的是/b的内容，但是并没有发生url替换，

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

我的理解是可以跳转到其他url ，不一定是这个项目里面写的url

history模式

• 创建的vue路径为#/ 因为vue-router默认hash模式，当在 router中加mode：history就好了，不过需要后台的配置
• 例子
• 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>

• nginx

location / {
  try_files $uri $uri/ /index.html;
}

• 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(‘We cannot open “index.htm” file.’)
}

res.writeHead(200, {
  'Content-Type': 'text/html; charset=utf-8'
})

res.end(content)
})
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

- caddy

rewrite {
    regexp .*
    to {path} /
}

• firebase主机

在你的 firebase.json 中加入：

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• 注意
  给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

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

如果想看更多例子请参考
https://router.vuejs.org/zh-cn/essentials/history-mode.html