VueJS에서 라우터(router)를 설정하고 사용하는 방법에 대하여 알아봅니다.! 라우터(Router) 설정이란?다른 프레임워크처럼 vuejs 역시 라우터를 제공합니다. 이때 VueJS에서는 Vue Router를 사용하게되는데요 라우터를 설정하게되면 특정 주소와 접근할 페이지 정보를 설정할 수 있습니다. 즉, /sample/ 이라는 주소로 접근할 경우 원하는 페이지의 정보를 보여줄 수 있도록 설정하는 것이 바로 라우터(router)에서 라우트(route)를 설정한다고 생각하시면 됩니다.SPA(싱글 페이지 어플리케이션)에서는 하나의 페이지로 동작하기 때문에 실제로 다른 주소로 접근하여 웹페이지를 리로드하지 않는 대신에 Router 설정이 반드시 필요하게 됩니다.# Vue Router 설치 및 설정하기가장 먼저 Router를 설치하는 방법입니다. vuejs 프로젝트에서 Vue Router를 사용하려면 script를 추가하거나 npm을 사용하여 install하는 방법 두 가지가 있습니다
2019-03-25 13:45:36AngularJS에서 $routeProvider를 사용하는 경우 template, controller 등을 설정할 수 있습니다.만약 html에 사용하는 컨트롤러에 별칭을 사용할 수 있도록 'controller as' 선언처럼 route설정시 사용하는 방법은 무엇일까요?# routeProvider 설정시 컨트롤러의 별칭 사용하는 방법이 경우 route 설정 옵션으로 controllerAs를 사용하는 것으로 가능합니다. 예를들어 만약 mainController를 ctrl로 사용하는 경우 아래와 같이 사용할 수 있게됩니다.$routeProvider .when('/', { templateUrl: 'main.html', controller: 'mainController', controllerAs: 'ctrl' });이제 템플릿 내에서 별칭 ctrl을 사용하여 접근하는 것이 가능합니다.
2018-08-06 18:14:24AngularJS를 사용하여 라우팅(Route)을 사용하는 경우 이와 관련된 다양한 이벤트를 제어 및 동작할 수 있습니다. 아래는 route 시작, 업데이트 등등의 관련 이벤트를 자세히 알아보도록 하겠습니다.# Route 라우팅 관련 이벤트 알아보기먼저 route에 사용할 수 있는 이벤트로 아래와 같이 4가지가 존재합니다. 각각 조금씩 다른 동작의 이벤트를 구현합니다.i. $routeChangeStart라우트 바뀌기 이전에 이벤트가 발생 ii. $routeChangeSuccess라우트가 성공적으로 변경 후 이벤트 발생iii. $routeChangeError라우트가 변경하지 않는 에러 발생시 발생iv. $routeUpdate라우트가 업데이트 되는 시점에 이벤트 발생# route 이벤트 동작 예제보기아래 예제를 봐주세요. 가장 보편적인 $routeChangeStart를 사용한 이벤트입니다. route가 시작되면 이벤트가 동작합니다. 여기서는 Route Change Starting !!
2017-11-16 08:59:25AngularJS는 라우팅 기능(Route)을 제공하여 접속된 url에 해당하는 페이지 소스를 보여줄 수 있습니다. 이때 적용된 코드에서 아래와 같은 코드를 쉽게 만날 수 있습니다.angular.module().config(function($locationProvider) { $locationProvider.html5Mode(true); ...});위 코드의 html5Mode()의 역할은 무엇이고 어떤 기능을 하는지 알아봅니다.# locationProvider.html5Mode() 사용하는 이유html5Mode()의 값을 true로 설정하는 경우 html5의 history API를 참조하여 url관련 기능을 사용할 수 있게합니다. 여기서 내부적으로 pushstate()를 사용할 수 있게하죠. 즉...html5의 history API에서 pushState()를 사용할 수 있음라우팅 주소창에 # 없이 사용이 가능만약 위 설정이 없는 경우 해쉬(#) 기호를 사용하여 주소를 변경하는 방
2017-11-16 07:08:51Python의 Flask에서 요청받은 url에 따라 응답 결과를 설정할 수 있으며 이때 라우팅을 설정해야합니다. Routing을 설정하면 Dynamic URL 요청을 원하는 경로 등으로 처리할 수 있게됩니다. 아래는 라우팅을 설정하고 사용하는 방법과 유용한 정보들에 대하여 자세히 알아봅니다.# Route 설정이 필요한 이유라우팅을 설정하면 각각의 요청받은 url에 맞게 서로 다른 응답 페이지, html 템플릿을 보여줄 수 있습니다. 만약 라우팅을 설정해 다소 다이나믹한 url 설정을 해보지 않은 경우 다소 복잡할 수 있죠... 아래는 간단하게 하나의 어플리케이션에서 여러 url경로를 기준으로 라우팅을 설정, 특정 템플릿을 보여주는 방법입니다.# Python Flask route 설정 예제보기만약 방문자의 접속 경로가 webisfree.com/test/라는 url로 페이지 요청시 어떻게하면 라우팅을 설정하는지 알아봅니다. 아래의 코드를 봐주세요.@ test.py## /test/로 접속
2017-11-07 13:27:35AngularJS를 사용하여 SPA(Single Page Application)으로 구현하는 경우 페이지 이동 즉, 현재 페이지에서 다른 페이지로 이동하는 방법으로 routeProvider 또는 stateProvider를 사용합니다. 만약 stateProvider를 사용하는 경우 $state를 사용하여 페이지 이동이 가능합니다. 아래는 다른 페이지로 이동하기 위해서 $state를 사용하는 방법을 자세히 알아보겠습니다.# $state.go()를 사용하여 페이지 이동, stateProvider 방식만약 stateProvider를 사용하여 페이지를 이동하는 경우 $state를 사용합니다. 내부 메소드로 go()가 있으며 이를 사용하면 다른 state, 페이지로 이동이 가능합니다. 먼저 간단한 $state의 go() 사용방법은 아래와 같습니다.$state.go('stateName', {parameter})여기서 stateName은 route 설정에 선언된 이름, 즉 이동할 위치이며 뒤의 p
2017-09-27 05:52:17angularjs의 ngRoute를 사용하면 싱글페이지 앱(SPA) 어플리케이션의 페이지 이동을 구현하기 쉽도록 도와줍니다. 해당하는 앱에서 ngRouter 모듈을 추가한 뒤 config 객체에 $routeProvider를 설정합니다. 그럼 아래를 봐주세요.# $RouteProvider 예제보기이 예제는 간단한 링크를 생성하고 해당하는 링크를 클릭할 경우 정해진 template을 호출하는 간단한 예제입니다.<div> <h1>예제를 클릭하세요.</h1> <a href="#/example01">Example 01</a> <a href="#/example02">Example 02</a> </div> <div ng-view></div> <script>var app = angular.module('app', ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/t
2016-12-26 21:05:27
