vue2 vue-rout

Posted 2020-09-26 document_yx

vue 2.0的路由比起1.0简单了许多，分为以下几个步骤；

1.创建路由块和视图块；

to里面是要切换的路径名称

<div id="app">
			<div>
				<router-link to="/home">主页</router-link>
				<router-link to="/news">新闻</router-link>
			</div>
			<div>
				<router-view></router-view>
			</div>
</div>

 2.写组件

　　　　 var Home={
            template:\'<h3>我是主页</h3>\'
        };
        var News={
            template:\'<h3>我是新闻</h3>\'
        };

 3、

//配置路由
        var routes=[
            {path:\'/home\', component:Home},
            {path:\'/news\', component:News},
　　　　　　　　//重镜像，相当于是主页
            {path:\'*\', redirect:\'/home\'}
        ];

 4、创建路由实例

var router = new VueRouter({
				routes :routes //routes是一个参数 
			})

 5、

//最后挂到vue上
        new Vue({
            router,
            el:\'#box\'
        });

 

效果：