前端框架Vue（2）——Vue-Router 路由跳转

1、最简单：html+js全在一个文件中<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>动态路由匹配</title><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://u

JesusAllen30

7060人浏览 · 2017-03-30 18:19:16

JesusAllen30 · 2017-03-30 18:19:16 发布

1、最简单：html+js全在一个文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态路由匹配</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <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>
<script>
    // 1、定义组件
    const Foo = {template:'<div>foo</div>'};
    const Bar = {template:'<div>bar</div>'};
    // 2、定义路由
    // 每一个路由映射一个组件
  const routes = [
    {path:'/foo',component:Foo},
    {path:'/bar',component:Bar}
  ]
    // 3、创建router实例，然后传'routes'配置
    const router = new VueRouter({
        routes
    });

    // 4、创建和挂载根实例
    const app = new Vue({
        router
    }).$mount('#app');
</script>
</body>
</html>

2、命名路由用name属性链接地址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>命名路由</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用router-link 组件来导航 -->
    <!-- 通过传入 'to' 属性指定链接 -->
    <!-- <router-link>默认会渲染成一个a标签 -->
    <router-link :to="{name:'user',params:{id:123}}">GO TO FOO</router-link>
    <router-link :to="{name:'user',params:{id:456}}">GO TO BAR</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将会被渲染到这里 -->
  <router-view></router-view>
</div>
<script>
  // 1、定义组件
  const Foo = {template:'<div>foo</div>'};
  const Bar = {template:'<div>bar</div>'};
  const User = {
    template:'<div>User {{$route.params.id}}</div>',
  }
  // 2、定义路由
  // 每一个路由映射一个组件


  // 3、创建router实例，然后传'routes'配置
  const router = new VueRouter({
    routes:[
      {
        path:'/user/:id',
        name:'user',
        component: User
      }
    ]
  });

  // 4、创建和挂载根实例
  const app = new Vue({
    router
  }).$mount('#app');
</script>
</body>
</html>

3、嵌套路由

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>路由嵌套</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用router-link 组件来导航 -->
    <!-- 通过传入 'to' 属性指定链接 -->
    <!-- <router-link>默认会渲染成一个a标签 -->
    <router-link to="/user/foo/profile">GO TO FOO</router-link>
    <router-link to="/user/bar/posts">GO TO BAR</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将会被渲染到这里 -->
  <router-view></router-view>
</div>
<script>
  // 1、定义组件
  /*const Foo = {template:'<div>foo</div>'};
   const Bar = {template:'<div>bar</div>'};*/
  const User = {
    template:'<div class="user">' +
    '<h2>User {{$route.params.id}}</h2>' +
    '<router-view></router-view>' +
    '</div>'
  }
  const UserProfile = {
    template:'<div>profile</div>'
  }
  const UserPosts = {
    template:'<div>posts</div>'
  }
  // 2、定义路由
  // 每一个路由映射一个组件


  // 3、创建router实例，然后传'routes'配置
  const router = new VueRouter({
    routes:[
      {path:'/user/:id',component: User,
        children:[
          {
            //当/user/:id/profile匹配成功
            //UserProfile会被渲染在User的<router-view>
            path:'profile',
            component:UserProfile
          },
          {
            path:'posts',
            component:UserPosts
          }
        ]
      }
    ]
  });

  // 4、创建和挂载根实例
  const app = new Vue({
    router
  }).$mount('#app');
</script>
</body>
</html>

4、命名视图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>命名视图</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>Hello Views!</h1>
    <ul>
      <li>
        <router-link to="/">/</router-link>
      </li>
      <li>
        <router-link to="/other">/other</router-link>
      </li>
    </ul>
    <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>
</div>
<script>
  const Header = {template:'<div>头部</div>'}
  const Section = {template:'<div>中间部分</div>'}
  const Footer = {template:'<div>尾部</div>'}

  const router = new VueRouter({
      mode:'history',
      routes:[
        {
            path:'/',
            //redirect:'/other',//重定向
            components:{
                default:Header,
                a:Section,
                b:Footer
            }
        },
        {
            path:'/other',
            components:{
                default:Footer,
                a:Section,
                b:Header
            }
        }
      ]
  })

  new Vue({
      router,
      el:'#app'
  })
</script>
</body>
</html>

*当使用 Vue-cli 时如何进行 vue-router 路由跳转

如果没有使用vue-cli开发环境，请移步
http://blog.csdn.net/docallen/article/details/68490256

项目目录结构：

1、npm 安装 vue-router

cnpm install vue-router --save

2、首先建上图结构中的3个组件,写点内容即可
3、配置 router.js 文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Hello from '../component/Hello.vue'
import firstPage from '../pages/firstPage.vue'
import secondPage from '../pages/secondPage.vue'

Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path:'/',
      name:'Hello',
      component:Hello
    },
    {
      path:'/first',
      name:'first',
      component:firstPage
    },
    {
      path:'/second',
      name:'second',
      component:secondPage
    }
  ]
})

4、修改 APP.vue 中的 template

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div class="nav-list">
      <router-link class="nav-item" to="/">首页</router-link>
      <router-link class="nav-item" to="/first">页面一</router-link>
      <router-link class="nav-item" to="/second">页面二</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

5、修改 main.js

引入router.js

import router from './router/router.js'

修改 Vue 实例

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

这里写图片描述

同时感谢李洪威的好文附上链接 https://segmentfault.com/a/1190000008557578

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^