Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
我们首先通过原生JS简单讲解router的核心原理,然后再用Vue-Router做个Dome~
一、前端router核心原理
路由核心原理:根据不同的锚点值做出不同的显示
。
我们用原生JS举例说明:
<a href="#/login">点我登陆</a>
<a href="#/register">点我注册</a>
<div id="app"></div>
<script type="text/javascript">
let oDiv = document.getElementById('app');
window.addEventListener('hashchange', function() {
//路由核心原理:根据不同的锚点值做出不同的显示
switch(location.hash) {
case '#/login':
oDiv.innerHTML = '<h1>登陆页面</h1>';
break;
case '#/register':
oDiv.innerHTML = '<h1>注册页面</h1>';
break;
}
});
</script>
(1)
(2) 点击“点我登陆”,出现:
(3)点击“点我注册” 同理。
无论点哪个,页面都是局部刷新,并未整个刷新,因其改变的是锚点值。
二、Vue Router
Vue.js可以通过组合组件来组成应用程序,而当我们把 Vue Router 添加进来时,我们需要做的只是:将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们
。
下面我们用Vue Router写个和上面一样的例子,
例:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
<script type="text/javascript">
const Login = {template: `<div>我是登陆界面</div>`,};
const Register = {template: `<div>我是注册界面</div>`,};
//1、安装插件
Vue.use(VueRouter);
//2、创建一个路由对象
const myRouter = new VueRouter({
//3、配置路由对象
routes: [
{path:'/login', component:Login},
{path:'/register', component:Register}
]
});
//5、指定路由改变局部位置
const App = {
template: `
<div>
<router-link to="/login">点我登陆</router-link>
<router-link to="/register">点我注册</router-link>
<router-view></router-view>
</div>`,
};
//4、将配置好的路由对象关联到Vue实例中
new Vue({
el: '#app',
router: myRouter,
components: {app: App},
template: '<app />',
});
</script>
输出:同第一个例子
- < router-link> 默认会被渲染成一个
<a>
标签 - 路由匹配到的组件将渲染在< router-view>里
看上面例子,你会发现如果要经常改锚点的名称,会很不利于项目的维护,我们再改进下:
例子升级版
const Login = {template: `<div>我是登陆界面</div>`,};
const Register = {template: `<div>我是注册界面</div>`,};
//1、安装插件
Vue.use(VueRouter);
//2、创建一个路由对象
const myRouter = new VueRouter({
//3、配置路由对象
routes: [
{name:'login', path:'/myLogin', component:Login},
{name:'register', path:'/myRegister', component:Register}
]
});
//5、指定路由改变局部位置
const App = {
template: `
<div>
<router-link :to="{name: 'login'}">点我登陆</router-link>
<router-link :to="{name: 'register'}">点我注册</router-link>
<router-view></router-view>
</div>`,
};
//4、将配置好的路由对象关联到Vue实例中
new Vue({
el: '#app',
router: myRouter,
components: {app: App},
template: '<app />',
});