Vue 2.x router部署 -- SPA 单页面应用

SPA(single-page application--单页面应用)：一种网站应用的模型，动态重写当前的页面来与用户交互，而不需要重新加载整个页面。

1.安装router插件 npm install vue-router@3.2.0 --save --vue2.x

2. 创建路由模块文件 --src目录下创建router文件夹及index.js文件

3.配置路由文件 --src/router/index.js

import VueRouter from 'vue-router' //导入路由插件vue-router
import Vue from 'vue' //导入vue模块

Vue.use(VueRouter) //安装路由

//创建路由对象，配置路由规则
const vueRouter = new VueRouter({
    routes: []
})

export default vueRouter //暴露路由模块

4.main.js入口文件中集成路由插件到vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

5.路由输出组件位置 --src/app.vue

<template>
  <div id="app">
    <router-view></router-view> //路由输出组件位置
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
</style>

 6.路由导航 --传参与接收参数

//路由导航组件-poster

<router-link to="/nba" tag="a">nba</router-link> //默认生成a标签
<router-link :to="{name:'News',query:{message:'hello world'}}">news</router-link> //路由传参get
<router-link :to="{name:'News',params:{message:'hello world'}}">news</router-link> //路由传参post

//receiver

...
created() {
            this.msg = this.$route.query.message
        },
watch: {
            $route(to, from) {
                this.msg = this.$route.query.message
            }
        }
...

7.路径路由与命名路由

//src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import News from '../views/News'
import Users from '../views/Users'

Vue.use(VueRouter)

const vueRouter = new VueRouter({
    routes: [
        {
            path: '/news', //路径路由
            name: 'News', //命名路由
            component: News
        },
        {
            path: '/users', //路径路由
            name: 'Users', //命名路由
            component: Users
        }
    ]
})

export default vueRouter

//src/app.vue

<template>
  <div id="app">
    <router-link :to="{name:'News'}">news</router-link> | 
    <router-link :to="{path:'/users'}">users</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
</style>

8.编程导航

//src/views/pageFloder/index.vue

...
methods:{
            toUser(){
                this.$router.push({path:'/users',query:{message:'hello world'}})
            }
        }
...

9.动态路由

//src/views/list/index.vue

<template>
    <div>
        <h2>list</h2>
        <ul>
            <li><router-link :to="{path:'/detail/1'}">list1</router-link></li>
            <li><router-link :to="{path:'/detail/2'}">list2</router-link></li>
            <li><router-link :to="{path:'/detail/3'}">list3</router-link></li>
        </ul>
        
    </div>
</template>

<script>
    export default {}
</script>

<style>
</style>

//src/views/detail/index.vue

<template>
    <div>
        <h2>detail</h2>
        <p>{{$route.params.id}}</p>        
    </div>
</template>

<script>
    export default {}
</script>

<style>
</style>

//src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import Detail from '../views/detail'
import List from '../views/list'

Vue.use(VueRouter)

const vueRouter = new VueRouter({
    routes: [
        {
            path: '/list',
            name: 'List',
            component: List
        },
        {
            path: '/detail/:id',
            component: Detail
        }
    ]
})

export default vueRouter

10.命名视图

//app.vue

<template>
  <div id="app">
    <router-view name='Slide'></router-view>
    <router-view name='Content'></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
</style>

//src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import Slide from '../components/slide'
import Content from '../components/content'

Vue.use(VueRouter)

const vueRouter = new VueRouter({
    routes: [
        {
            path: '/main',
            components: {
                Slide,
                Content
            }
        }
    ]
})

export default vueRouter