Vue路由使用以及参数传递

发表于

Vue路由使用以及参数传递

  • 安装

    • npm install vue-router

  • 简单操作使用

    1
    2
    3
    4
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

  • vue-router操作使用分解

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

  • 定义路由 每个路由即为一个组件

    1
    2
    3
    4
    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]

  • 创建router实例

    1
    2
    3
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

  • 创建和挂载根实例

    1
    2
    3
    4
    const app = new Vue({
    　　el:'#app',
    　　router
    })

  • vue-router默认是hash模式,url:http://localhost:8000/#/hello
    如果想取消掉#,可以使用history模式，这样可以利用 history.pushState API完成url跳转无需重新加载页面

    1
    2
    3
    4
    const router = new VueRouter({
        mode: 'history',
        routes: [...]
    })

    那么url::http://localhost:8000/hello
    如果使用history模式,服务器端需要进行一些配置才可以,否则直接访问带参数的路由地址会返回404

    • 一些服务器端的配置

      • apache 需要修改配置
        在项目目录下新建.htaccess文件(跟index.html同级)

        1
        2
        3
        4
        5
        6
        7
        8
        <IfModule mod_rewrite.c>
            RewriteEngine On
            RewriteBase /ibms/
            RewriteRule ^index\.html$ - [L]
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteCond %{REQUEST_FILENAME} !-d
            RewriteRule . /ibms/index.html [L]
        </IfModule>

        记得重启apache服务器

      • nginx

        1
        2
        3
        location / {
            try_files $uri $uri/ /index.html;
        }

      • IIS服务器配置 注意:IIS需要安装重写工具

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        <?xml version="1.0" encoding="UTF-8"?>
        <configuration>
            <system.webServer>
                <rewrite>
                <rules>
                    <rule name="ReactRouter" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{HTTP_METHOD}" pattern="^GET$" />
                        <add input="{HTTP_ACCEPT}" pattern="^text/html" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                    </rule>
                </rules>
                </rewrite>
        </system.webServer>
        </configuration>

      为了防止404报错信息,可以在路由中配置

      1
      2
      3
      4
      5
      6
      const router = new VueRouter({
          mode: 'history',
          routes: [
              { path: '*', component: NotFoundComponent }
          ]
      })

  • 重定向和别名

    • 重定向通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

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

      重定向的目标也可以是一个命名的路由：

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