vue中的路由
在vue中的路由能够实现其他组件的相互切换,实现路由的步骤分为安装,设置路由组件,创建路由表,注册路由表。路由之间的切换可以使用<router-link to="/去哪个路由">首页</router-link>切换<router-view></router-view>路由视图显示的内容。具体如下:vue路由官方文档:https://router.vu
·
在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>
更多推荐
已为社区贡献3条内容
所有评论(0)