注意:vue文件全部放在src/components文件夹下
自定义一个路由(超链接):
1、先新建一个vue项目
2、新建RouterTest.vue文件,存放路径src/compents
3、修改src/router下的index.js文件(头顶引入vue和vue-router的组件)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import RouterTest from '@/components/RouterTest' //新加,在下方配置component:RouterTest才生效
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/newcontact', // 和router-link to相呼应,导航到/newcontact
name:'NewContact',
component:NewContact
},
{
path:'/routerTest', // 和router-link to相呼应,导航到/routerTest
name:'RouterTest', // 和import后的名称相对应
component:RouterTest
}
]
})
4、在原vue文件中添加如下代码,完成vue router(超链接)
<template>
<!--router-link to=""会把路由导航到http://localhost:8080/#/routerTest
"router-link"属性
1.":to" 属 性
相当于a标签中的"herf"属性,后面跟跳转链接所用
<router-link :to="/home">Home</router-link>
<a href="/home">Home</a>
-->
<router-link to="routerTest"><h1>{{ msg }}</h1> </router-link>
</template>
<script>
export default { //ES6语法,用于输出到外部,这样就可以在其他文件内用import输入
name: 'HelloWorld',
data () { //由于是组件,data必须是个函数,这是ES6写法,data后面加括号相当于data: function () {}
return { //记得return不然接收不到数据
msg: '路由就像超链接' //上面的 msg 就是这里输出的
}
}
}
</script>
<style>
h1 {
font-weight: normal;
}
a {
color: #42b983;
}
</style>