vue.js_10_vue的路由
Posted 忆夏KhaZix
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js_10_vue的路由相关的知识，希望对你有一定的参考价值。
1.vue-router的基本使用
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>
2.一个基本的路由
<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>
以上是关于vue.js_10_vue的路由的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Vue.js - Nuxt - TypeScript 应用程序中访问路由参数？