Vue.js路由组件vue-router使用方法详解
使用Vue.js+vue-router创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉vue-router在哪里渲染即可。
一、普通方式基本例子：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vue-router使用方法</title>
</head>
<body>
<divid="app">
<h1>HelloApp!</h1>
<p>
<!--使用router-link组件来导航.-->
<!--通过传入`to`属性指定链接.-->
<!--<router-link>默认会被渲染成一个`<a>`标签-->
<router-linkto="/foo">GotoFoo</router-link>
<router-linkto="/bar">GotoBar</router-link>
</p>
<!--路由出口-->
<!--路由匹配到的组件将渲染在这里-->
<router-view></router-view>
</div>
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
<scriptsrc="https://unpkg.com/vue-router"></script>
<script>
//1.定义（路由）组件。
//可以从其他文件import进来
constFoo={template:'<div>foo</div>'}
constBar={template:'<div>bar</div>'}
//2.定义路由
//每个路由应该映射一个组件。其中"component"可以是
//通过Vue.extend()创建的组件构造器，
//或者，只是一个组件配置对象。
constroutes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
//3.创建router实例，然后传`routes`配置
constrouter=newVueRouter({
routes//（缩写）相当于routes:routes
})
//4.创建和挂载根实例。
//记得要通过router配置参数注入路由，
//从而让整个应用都有路由功能
constapp=newVue({
router
}).$mount('#app')
//现在，应用已经启动了！
</script>
</body>
</html>
二、块化机制编程基本例子，以在vue-cli中的使用方法为例
安装vue-router插件
#npminstallvue-router--save-dev
在src文件夹下面的components文件夹下新建Foo.vue、Bar.vue两个组件，在Foo组件写入以下内容
<template> <div>foo</div> </template>
在Bar.vue组件中写入以下内容
<template> <div>bar</div> </template>
打开src文件夹下面的app.vue文件，修改代码为
<template> <divid="app"> <router-view class="view" keep-alive transition transition-mode="out-in"> </router-view> </div> </template>
这里用router-view来把刚才新建的两个页面加载到这里来，修改src文件夹下面的main.js文件
importVuefrom'vue'
importAppfrom'./App'
//引用路由插件
importVueRouterfrom'vue-router'
//使用路由插件
Vue.use(VueRouter)
//引入组件
importFoofrom'./components/Foo'
importBarfrom'./components/Bar'
constroutes=[
{path:'/foo/',component:Foo}，
{path:'/bar/',component:Bar}，
]
//使用路由规则
constrouter=newVueRouter({
routes
})
//加载路由规则
newVue({
router,
el:'#app',
render:h=>h(App)
})
然后运行npmrundev查看效果吧。
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。