vue nginx 重定向_拍一拍vue路由

拍一拍vue-路由

---

路由的定义

如果你以前做过服务端相关的开发，那你一定会对程序的URL结构有所了解，我没记错的话也是路由映射的概念，需要进行配置。

路由的安装

你可以通过npm(npm install vue-router)或通过 Vue CLI 脚手架创建项目的时候进行选择安装

install vue-router

我们通过脚手架vue-cli创建一个新的项目 在 src/router/index.js下

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    }  ]})

app.vue

<template>  <div id="app">    <img src="./assets/logo.png">    <router-view/>  div>template><script>export default {  name: 'App'}script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}style>

在说明路由是如何展示的之前 我们需要知道什么是SPA 其实就是single-page-applacation的缩写 vue是一个单页面的应用 最终打包出来的只是一个index.html页面 项目中所有的页面展示和跳转都是通过路由实现

主要通过router-view标签来承载页面的展示 就好像是一个舞台一样 每个演员就好比是一个个路由 舞台从未改变 改变的永远是人 有人此刻会有疑问 浏览器打开的连接上面有个#是啥意思呢 ？其实我们对#并不陌生  a标签加# 可以实现锚点 页面并未发生跳转

vue的路由有两种模式一种是history,另外一种是hash 两者有何区别呢？

1.直观区别：

hash模式url带

2.深层区别

hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。 如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传 功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的， 咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式 但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。

路由的展示

当浏览器访问http://localhost:8080/#/时候 匹配的到路由为path:'/' 此路由映射的组件为HelloWorld组件 那么router-view就被组件代码所替换掉 页面就被展示出来

自定义about页面

扩展路由如下

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import about from '@/components/about'Vue.use(Router)export default new Router({  mode:'history',  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/about',      name: 'about',      component: about    }  ]})

新建about.vue页面组件

<template>  <div>我是about页面div>template><script>export default {}script><style>style>

在helloworld中增加路由入口

<template>  <div class="hello">    <h1>{{ msg }}h1>    <h2>Essential Linksh2>    <router-link to="/about">关于我的router-link> //路由入口  div>template><script>export default {  name: 'HelloWorld',  data () {    return {      msg: 'Welcome to Your Vue.js App'    }  }}script><style scoped>h1, h2 {  font-weight: normal;}ul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}a {  color: #42b983;}style>

我们可以看到router-link被渲染成为a标签 href指向跳转的路由地址 当我们点击关于我的 浏览器显示如下 

router-link相关属性

to

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<router-link to="home">Homerouter-link><a href="/home">Homea><router-link v-bind:to="'home'">Homerouter-link><router-link :to="'home'">Homerouter-link><router-link :to="{ path: 'home' }">Homerouter-link><router-link :to="{ name: 'user', params: { userId: 123 }}">Userrouter-link><router-link :to="{ path: 'register', query: { plan: 'private' }}">Registerrouter-link>

运用到项目中我们可以增加几个路由和页面

<router-link :to="{path:'about'}">关于我的router-link>    <router-link to="info">信息内容router-link>    <router-link :to="{name: 'list', params: { userId: 123 }}">列表router-link>    <router-link :to="{path:'me',query:{id:456}}">我的router-link>

router/index.js

export default new Router({  mode:'history',  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/about',      name: 'about',      component: about    },    {      path: '/info',      name: 'info',      component: info    },    {      path: '/list',      name: 'list',      component: list    },    {      path: '/me',      name: 'me',      component: me    },  ]

src/components/list.vue

<template>  <div>我是list页面div>template><script>export default {  mounted(){    console.log(this);  }}script><style>style>

我们可以看下打印到的this是什么 

这样我们可以通过this.$route.params.userId 获取到通过router-link传递过来的参数 这也是一种路由传参方式 同理query亦是如此

END

下一节 嵌套路由