标签：bsp ack code new rip eth routes -- node
1>安装vue-rouder路由模块
<script src="js/vue-2.4.0.js"></script>
<script src="js/vue-router v3.1.3.js"></script>
2>创建一个VueRouter对象
var routerObj = new VueRouter({
//routers 代表router对象中路由的匹配规则
//参数1：path，表示监听哪一个地址
//参数2：表示如果参数1监听到了，则展示component对应的组件
//component参数 必须是一个组件模板对象，而不能是组件模板
routes: [{
path: ‘/‘,
redirect: ‘/login‘
}, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
{
path: ‘/login‘,
component: login
},
{
path: ‘/register‘,
component: register
},
],
//修改默认的style样式类
linkActiveClass:‘myActive‘
})
3> 将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件
var vm = new Vue({
el: ‘#app‘,
data: {},
methods: {},
//将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件
router: routerObj
});
4>在组件中渲染
<div id="app">
<!--<a href="#/login">登录</a>
<a href="#/register">注册</a>-->
<!--router-link 默认渲染一个a标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<body>
<div id="app">
<!--<a href="#/login">登录</a>
<a href="#/register">注册</a>-->
<!--router-link 默认渲染一个a标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
//创建一个vue的router对象
var login = {
template: ‘<h1>登录组件</h1>‘
}
var register = {
template: ‘<h1>注册组件</h1>‘
}
// Vue.component(‘login‘,{
// template:‘<h3></h3>‘
// });
var routerObj = new VueRouter({
//routers 代表router对象中路由的匹配规则
//参数1：path，表示监听哪一个地址
//参数2：表示如果参数1监听到了，则展示component对应的组件
//component参数 必须是一个组件模板对象，而不能是组件模板
routes: [{
path: ‘/‘,
redirect: ‘/login‘
}, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
{
path: ‘/login‘,
component: login
},
{
path: ‘/register‘,
component: register
},
],
linkActiveClass:‘myActive‘
})
var vm = new Vue({
el: ‘#app‘,
data: {},
methods: {},
//将路由规则对象，注册到vm实例上。用来监听URL地址的变化，然后展示对应的组件
router: routerObj
});
</script>
</body>
标签：bsp ack code new rip eth routes -- node
原文地址：https://www.cnblogs.com/asndxj/p/11707749.html
