1.首先npm中是否有vue-router
一般在vue-cli的时候就已经下载好了依赖包了
2.使用vue的话正常的需要涉及这几个文件
demo/src/router/index.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import
Vue from
'vue'
import
Router from
'vue-router'
import
Hello from
'../components/Hello'
//首页
import
Test from
'../components/test'
//需要跳转的页面 给组件重新命名
Vue.use(Router)
export
default
new
Router({
routes: [
{
//首页
path:
'/'
,
name:
'Hello'
,
component: Hello
},
{
//需要跳转的页面
path:
'/test'
,
name:
'test'
,
component:Test
//组件名字
}
]
})
|
demo/src/app.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<template>
<div id=
"app"
>
<img src=
"./assets/logo.png"
>
<p>
<router-link to=
"/home"
>home</router-link>
//跳转首页
<router-link to=
"/test"
>test</router-link>
//跳转新页面
</p>
<router-view></router-view>
//页面渲染放置的部分
</div>
</template>
<script>
export
default
{
name:
'app'
}
</script>
<style>
#app {
font-family:
'Avenir'
, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color:
#2c3e50;
margin-top: 60px;
}
</style>
|
demo/src/main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import
Vue from
'vue'
import
App from
'./App'
import
router from
'./router'
Vue.config.productionTip =
false
/* eslint-disable no-new */
new
Vue({
el:
'#app'
,
router,
template:
'<App/>'
,
components: { App }
}).$mount(
'#app'
)
//实例挂载到元素中
|
两个页面的组件
这样的话，基本的路由设置就好了，可以按照正常的npm run dev运行这个项目了
另外还有嵌套 自定义多种路由
具体的路由内容可以查看：https://router.vuejs.org/zh-cn/installation.html
扫描二维码关注公众号，回复：
917026 查看本文章
