vue中的路由

在vue中的路由能够实现其他组件的相互切换，实现路由的步骤分为安装，设置路由组件，创建路由表，注册路由表。
路由之间的切换可以使用<router-link to="/去哪个路由">首页</router-link>切换<router-view></router-view>路由视图显示的内容。具体如下：

vue路由官方文档：https://router.vuejs.org/zh/

安装路由模块

npm install vue-router

安装完成后在入口main.js文件中引入安装路由功能

import VueRouter from 'vue-router'

Vue.use(VueRouter)

设置路由界面

Home.vue

<template>
    <div>
        首页
    </div>
</template>

<script>
export default {
    name: 'MyproHome',
    data() {
        return {
            
        };
    },
    mounted() {
        
    },
    methods: {
        
    },
};
</script>

<style>

</style>

Product.vue

<template>
    <div>
        商品列表
    </div>
</template>

<script>
export default {
    name: 'MyproProduct',
    data() {
        return {
            
        };
    },
    mounted() {
        
    },
    methods: {
        
    },
};
</script>

<style>

</style>

创建路由表

在与mian.js同级目录下创建routes.js

import Home from './view/Home'
import Products from './view/Product'

export const routes = [
    {
        path:'/Home',
        component:Home
    },
    {
        path:'/Products',
        component:Products
    }
]

在main.js中使用路由模块以及注册路由表

import Vue from 'vue'
import App from './App.vue'
import {routes} from './routes'  // 1.引入静态路由表

Vue.use(VueRouter)
// 2.创建一个VueRoute模块的实例

const router = new VueRouter({
  routes:routes
});

new Vue({
  el: '#app',
  router, // 3.把router实例放到vue实例当中
  render: h => h(App)
})

使用静态路由

要在App.vue中使用标签运行


通过url#后面路径名切换不同的路由显示。而这个路径来自routes.js中的path指定的。

还可以使用<router-link to="/去哪个路由">首页</router-link>切换<router-view></router-view>路由视图显示的内容。

	<span>
      <router-link to="/Home">首页</router-link>
      <router-link to="/Products">商品列表</router-link>
    </span>